Chú thích góc 2 @ViewChild trả về không xác định

Tôi đang cố gắng học Angular 2.

Tôi muốn truy cập vào một thành phần con từ một thành phần cha mẹ bằng cách sử dụng Chú thích @ViewChild .

Đây là một số dòng mã:

Trong BodyContent.ts tôi có:

import {ViewChild, Component, Injectable} from 'angular2/core';
import {FilterTiles} from '../Components/FilterTiles/FilterTiles';


@Component({
selector: 'ico-body-content'
, templateUrl: 'App/Pages/Filters/BodyContent/BodyContent.html'
, directives: [FilterTiles] 
})


export class BodyContent {
    @ViewChild(FilterTiles) ft:FilterTiles;

    public onClickSidebar(clickedElement: string) {
        console.log(this.ft);
        var startingFilter = {
            title: 'cognomi',
            values: [
                'griffin'
                , 'simpson'
            ]}
        this.ft.tiles.push(startingFilter);
    } 
}

trong khi trong FilterTiles.ts :

 import {Component} from 'angular2/core';


 @Component({
     selector: 'ico-filter-tiles'
    ,templateUrl: 'App/Pages/Filters/Components/FilterTiles/FilterTiles.html'
 })


 export class FilterTiles {
     public tiles = [];

     public constructor(){};
 }

Cuối cùng ở đây các mẫu (như được đề xuất trong các ý kiến):

BodyContent.html

<div (click)="onClickSidebar()" class="row" style="height:200px; background-color:red;">
        <ico-filter-tiles></ico-filter-tiles>
    </div>

FilterTiles.html

<h1>Tiles loaded</h1>
<div *ngFor="#tile of tiles" class="col-md-4">
     ... stuff ...
</div>

Mẫu FilterTiles.html được tải chính xác vào thẻ ico-filter-gạch (thực sự tôi có thể thấy tiêu đề).

Lưu ý: lớp BodyContent được chèn vào bên trong một mẫu khác (Body) bằng DynamicComponetLoader: dcl.loadAsRoot (BodyContent, '# ico-bodyContent', kim phun):

import {ViewChild, Component, DynamicComponentLoader, Injector} from 'angular2/core';
import {Body}                 from '../../Layout/Dashboard/Body/Body';
import {BodyContent}          from './BodyContent/BodyContent';

@Component({
    selector: 'filters'
    , templateUrl: 'App/Pages/Filters/Filters.html'
    , directives: [Body, Sidebar, Navbar]
})


export class Filters {

    constructor(dcl: DynamicComponentLoader, injector: Injector) {
       dcl.loadAsRoot(BodyContent, '#ico-bodyContent', injector);
       dcl.loadAsRoot(SidebarContent, '#ico-sidebarContent', injector);

   } 
}

Vấn đề là khi tôi cố gắng ghi ftvào nhật ký giao diện điều khiển, tôi nhận được undefinedvà tất nhiên tôi gặp một ngoại lệ khi tôi cố gắng đẩy thứ gì đó vào trong mảng "gạch": 'không có thuộc tính gạch cho "không xác định"' .

Một điều nữa: Thành phần FilterTiles dường như được tải chính xác, vì tôi có thể thấy mẫu html cho nó.

Bất kì lời đề nghị nào? Cảm ơn

Tôi đã có một vấn đề tương tự và nghĩ rằng tôi sẽ đăng trong trường hợp người khác mắc lỗi tương tự. Đầu tiên, một điều cần xem xét là AfterViewInit; bạn cần đợi cho chế độ xem được khởi tạo trước khi bạn có thể truy cập @ViewChild. Tuy nhiên, tôi @ViewChildvẫn trả về null. Vấn đề là của tôi *ngIf. Lệnh *ngIfnày đã giết chết thành phần điều khiển của tôi nên tôi không thể tham khảo nó.

import {Component, ViewChild, OnInit, AfterViewInit} from 'angular2/core';
import {ControlsComponent} from './controls/controls.component';
import {SlideshowComponent} from './slideshow/slideshow.component';

@Component({
    selector: 'app',
    template:  `
        <controls *ngIf="controlsOn"></controls>
        <slideshow (mousemove)="onMouseMove()"></slideshow>
    `,
    directives: [SlideshowComponent, ControlsComponent]
})

export class AppComponent {
    @ViewChild(ControlsComponent) controls:ControlsComponent;

    controlsOn:boolean = false;

    ngOnInit() {
        console.log('on init', this.controls);
        // this returns undefined
    }

    ngAfterViewInit() {
        console.log('on after view init', this.controls);
        // this returns null
    }

    onMouseMove(event) {
         this.controls.show();
         // throws an error because controls is null
    }
}

Mong rằng sẽ giúp.

EDIT
Như được đề cập bởi @Ashg dưới đây , một giải pháp là sử dụng @ViewChildrenthay vì @ViewChild.

Vấn đề như đã đề cập trước đó là vấn đề ngIfkhiến cho khung nhìn không được xác định. Câu trả lời là sử dụng ViewChildrenthay vì ViewChild. Tôi gặp vấn đề tương tự khi tôi không muốn hiển thị lưới cho đến khi tất cả dữ liệu tham chiếu đã được tải.

html:

   <section class="well" *ngIf="LookupData != null">
       <h4 class="ra-well-title">Results</h4>
       <kendo-grid #searchGrid> </kendo-grid>
   </section>

Mã thành phần

import { Component, ViewChildren, OnInit, AfterViewInit, QueryList  } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';

export class SearchComponent implements OnInit, AfterViewInit
{
    //other code emitted for clarity

    @ViewChildren("searchGrid")
    public Grids: QueryList<GridComponent>

    private SearchGrid: GridComponent

    public ngAfterViewInit(): void
    {

        this.Grids.changes.subscribe((comps: QueryList <GridComponent>) =>
        {
            this.SearchGrid = comps.first;
        });


    }
}

Ở đây chúng tôi đang sử dụng ViewChildrenđể bạn có thể lắng nghe những thay đổi. Trong trường hợp này bất kỳ trẻ em với tài liệu tham khảo #searchGrid. Hi vọng điêu nay co ich.

Bạn có thể sử dụng một setter cho @ViewChild()

@ViewChild(FilterTiles) set ft(tiles: FilterTiles) {
    console.log(tiles);
};

Nếu bạn có một trình bao bọc ng If, setter sẽ được gọi với không xác định, và sau đó một lần nữa với tham chiếu một lần ng If cho phép nó hiển thị.

Vấn đề của tôi là một cái gì đó khác mặc dù. Tôi đã không bao gồm mô-đun chứa "FilterTiles" trong app.modules của mình. Mẫu không đưa ra lỗi nhưng tham chiếu luôn không được xác định.

Điều này làm việc cho tôi.

Thành phần của tôi có tên 'my-thành phần', ví dụ, được hiển thị bằng cách sử dụng * ng If = "showMe" như vậy:

<my-component [showMe]="showMe" *ngIf="showMe"></my-component>

Vì vậy, khi thành phần được khởi tạo, thành phần vẫn chưa được hiển thị cho đến khi "showMe" là đúng. Do đó, tất cả các tham chiếu @ViewChild của tôi đều không được xác định.

Đây là nơi tôi đã sử dụng @ViewChildren và QueryList mà nó trả về. Xem bài viết góc cạnh trên QueryList và bản demo sử dụng @ViewChildren .

Bạn có thể sử dụng QueryList mà @ViewChildren trả về và đăng ký mọi thay đổi đối với các mục được tham chiếu bằng rxjs như được thấy bên dưới. @ViewChild không có khả năng này.

import { Component, ViewChildren, ElementRef, OnChanges, QueryList, Input } from '@angular/core';
import 'rxjs/Rx';

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnChanges {

  @ViewChildren('ref') ref: QueryList<any>; // this reference is just pointing to a template reference variable in the component html file (i.e. <div #ref></div> )
  @Input() showMe; // this is passed into my component from the parent as a    

  ngOnChanges () { // ngOnChanges is a component LifeCycle Hook that should run the following code when there is a change to the components view (like when the child elements appear in the DOM for example)
    if(showMe) // this if statement checks to see if the component has appeared becuase ngOnChanges may fire for other reasons
      this.ref.changes.subscribe( // subscribe to any changes to the ref which should change from undefined to an actual value once showMe is switched to true (which triggers *ngIf to show the component)
        (result) => {
          // console.log(result.first['_results'][0].nativeElement);                                         
          console.log(result.first.nativeElement);                                          

          // Do Stuff with referenced element here...   
        } 
      ); // end subscribe
    } // end if
  } // end onChanges 
} // end Class

Hy vọng điều này sẽ giúp ai đó tiết kiệm thời gian và thất vọng.

Cách giải quyết của tôi là sử dụng [style.display]="getControlsOnStyleDisplay()"thay vì *ngIf="controlsOn". Khối ở đó nhưng nó không được hiển thị.

@Component({
selector: 'app',
template:  `
    <controls [style.display]="getControlsOnStyleDisplay()"></controls>
...

export class AppComponent {
  @ViewChild(ControlsComponent) controls:ControlsComponent;

  controlsOn:boolean = false;

  getControlsOnStyleDisplay() {
    if(this.controlsOn) {
      return "block";
    } else {
      return "none";
    }
  }
....

Điều giải quyết vấn đề của tôi là đảm bảo staticđược đặt thành false.

@ViewChild(ClrForm, {static: false}) clrForm;

Khi statictắt, @ViewChildtham chiếu được cập nhật bởi Angular khi *ngIfchỉ thị thay đổi.

Giải pháp của tôi cho việc này là thay thế *ngIf bằng [hidden]. Nhược điểm là tất cả các thành phần con đã có trong mã DOM. Nhưng làm việc cho yêu cầu của tôi.

Trong trường hợp của tôi, tôi đã có một trình thiết lập biến đầu vào bằng cách sử dụng ViewChildvà ViewChildbên trong một lệnh *ngIf, vì vậy trình thiết lập đã cố gắng truy cập vào nó trước khi *ngIfkết xuất (nó sẽ hoạt động tốt mà không có *ngIf, nhưng sẽ không hoạt động nếu nó luôn được đặt thành đúng với *ngIf="true").

Để giải quyết, tôi đã sử dụng Rxjs để đảm bảo mọi tham chiếu đến sự ViewChildchờ đợi cho đến khi chế độ xem được bắt đầu. Đầu tiên, tạo một Chủ đề hoàn thành khi sau khi xem init.

export class MyComponent implements AfterViewInit {
  private _viewInitWaiter$ = new Subject();

  ngAfterViewInit(): void {
    this._viewInitWaiter$.complete();
  }
}

Sau đó, tạo một hàm lấy và thực thi lambda sau khi đối tượng hoàn thành.

private _executeAfterViewInit(func: () => any): any {
  this._viewInitWaiter$.subscribe(null, null, () => {
    return func();
  })
}

Cuối cùng, hãy đảm bảo các tham chiếu đến ViewChild sử dụng chức năng này.

@Input()
set myInput(val: any) {
    this._executeAfterViewInit(() => {
        const viewChildProperty = this.viewChild.someProperty;
        ...
    });
}

@ViewChild('viewChildRefName', {read: MyViewChildComponent}) viewChild: MyViewChildComponent;

Nó phải hoạt động.

Nhưng như Günter Zöchbauer nói phải có một số vấn đề khác trong mẫu. Tôi đã tạo ra kinda có liên quan-Plunkr-Trả lời . Vui lòng kiểm tra bảng điều khiển của trình duyệt.

boot.ts

@Component({
selector: 'my-app'
, template: `<div> <h1> BodyContent </h1></div>

      <filter></filter>

      <button (click)="onClickSidebar()">Click Me</button>
  `
, directives: [FilterTiles] 
})


export class BodyContent {
    @ViewChild(FilterTiles) ft:FilterTiles;

    public onClickSidebar() {
        console.log(this.ft);

        this.ft.tiles.push("entered");
    } 
}

bộ lọcTiles.ts

@Component({
     selector: 'filter',
    template: '<div> <h4>Filter tiles </h4></div>'
 })


 export class FilterTiles {
     public tiles = [];

     public constructor(){};
 }

Nó hoạt động như một say mê. Vui lòng kiểm tra lại các thẻ và tài liệu tham khảo của bạn.

Cảm ơn...

Điều này làm việc cho tôi, xem ví dụ dưới đây.

import {Component, ViewChild, ElementRef} from 'angular2/core';

@Component({
    selector: 'app',
    template:  `
        <a (click)="toggle($event)">Toggle</a>
        <div *ngIf="visible">
          <input #control name="value" [(ngModel)]="value" type="text" />
        </div>
    `,
})

export class AppComponent {

    private elementRef: ElementRef;
    @ViewChild('control') set controlElRef(elementRef: ElementRef) {
      this.elementRef = elementRef;
    }

    visible:boolean;

    toggle($event: Event) {
      this.visible = !this.visible;
      if(this.visible) {
        setTimeout(() => { this.elementRef.nativeElement.focus(); });
      }
    }

}

Tôi đã có một vấn đề tương tự, trong đó ViewChildbên trong một switchmệnh đề không tải phần tử viewChild trước khi nó được tham chiếu. Tôi đã giải quyết nó theo cách nửa hack nhưng gói ViewChildtham chiếu theo cách setTimeoutthực thi ngay lập tức (tức là 0ms)

Giải pháp của tôi cho vấn đề này là di chuyển ngNếu từ bên ngoài thành phần con sang bên trong thành phần con trên một div bao bọc toàn bộ phần html. Bằng cách đó, nó vẫn bị ẩn khi cần, nhưng đã có thể tải thành phần và tôi có thể tham chiếu nó trong phần cha mẹ.

Tôi sửa nó chỉ thêm SetTimeout sau khi thiết lập hiển thị thành phần

HTML của tôi:

<input #txtBus *ngIf[show]>

Thành phần của tôi

@Component({
  selector: "app-topbar",
  templateUrl: "./topbar.component.html",
  styleUrls: ["./topbar.component.scss"]
})
export class TopbarComponent implements OnInit {

  public show:boolean=false;

  @ViewChild("txtBus") private inputBusRef: ElementRef;

  constructor() {

  }

  ngOnInit() {}

  ngOnDestroy(): void {

  }


  showInput() {
    this.show = true;
    setTimeout(()=>{
      this.inputBusRef.nativeElement.focus();
    },500);
  }
}

Trong trường hợp của tôi, tôi biết thành phần con sẽ luôn có mặt, nhưng muốn thay đổi trạng thái trước khi khởi tạo con để tiết kiệm công việc.

Tôi chọn thử nghiệm cho trẻ cho đến khi nó xuất hiện và thay đổi ngay lập tức, điều này giúp tôi tiết kiệm một chu kỳ thay đổi trên thành phần con.

export class GroupResultsReportComponent implements OnInit {

    @ViewChild(ChildComponent) childComp: ChildComponent;

    ngOnInit(): void {
        this.WhenReady(() => this.childComp, () => { this.childComp.showBar = true; });
    }

    /**
     * Executes the work, once the test returns truthy
     * @param test a function that will return truthy once the work function is able to execute 
     * @param work a function that will execute after the test function returns truthy
     */
    private WhenReady(test: Function, work: Function) {
        if (test()) work();
        else setTimeout(this.WhenReady.bind(window, test, work));
    }
}

Thông báo, bạn có thể thêm số lần thử tối đa hoặc thêm một vài độ trễ cho setTimeout. setTimeoutném hiệu quả vào cuối danh sách các hoạt động đang chờ xử lý.

Một loại phương pháp chung:

Bạn có thể tạo một phương thức sẽ đợi cho đến khi ViewChildsẵn sàng

function waitWhileViewChildIsReady(parent: any, viewChildName: string, refreshRateSec: number = 50, maxWaitTime: number = 3000): Observable<any> {
  return interval(refreshRateSec)
    .pipe(
      takeWhile(() => !isDefined(parent[viewChildName])),
      filter(x => x === undefined),
      takeUntil(timer(maxWaitTime)),
      endWith(parent[viewChildName]),
      flatMap(v => {
        if (!parent[viewChildName]) throw new Error(`ViewChild "${viewChildName}" is never ready`);
        return of(!parent[viewChildName]);
      })
    );
}


function isDefined<T>(value: T | undefined | null): value is T {
  return <T>value !== undefined && <T>value !== null;
}

Sử dụng:

  // Now you can do it in any place of your code
  waitWhileViewChildIsReady(this, 'yourViewChildName').subscribe(() =>{
      // your logic here
  })

Đối với tôi, vấn đề là tôi đã tham chiếu ID trên phần tử.

@ViewChild('survey-form') slides:IonSlides;

<div id="survey-form"></div>

Thay vì như thế này:

@ViewChild('surveyForm') slides:IonSlides;

<div #surveyForm></div>

Nếu bạn đang sử dụng Ionic, bạn sẽ cần sử dụng ionViewDidEnter()móc vòng đời. Ionic chạy một số nội dung bổ sung (chủ yếu liên quan đến hoạt hình) thường gây ra các lỗi không mong muốn như thế này, do đó cần một cái gì đó chạy sau ngOnInit , ngAfterContentInitv.v.

Đây là một cái gì đó làm việc cho tôi.

@ViewChild('mapSearch', { read: ElementRef }) mapInput: ElementRef;

ngAfterViewInit() {
  interval(1000).pipe(
        switchMap(() => of(this.mapInput)),
        filter(response => response instanceof ElementRef),
        take(1))
        .subscribe((input: ElementRef) => {
          //do stuff
        });
}

Vì vậy, về cơ bản, tôi đặt một kiểm tra mỗi giây cho đến khi điều đó *ngIftrở thành sự thật và sau đó tôi thực hiện công việc của mình liên quan đến ElementRef.

Giải pháp hiệu quả với tôi là thêm chỉ thị trong khai báo trong app.module.ts