☰

Angular 2 @ViewChild アノテーションが undefined を返す 質問する

tag-icon • tag-icon typescript angular
Angular 2 @ViewChild アノテーションが undefined を返す 質問する

Angular 2を学習しようとしています。

@ViewChildアノテーションを使用して、親コンポーネントから子コンポーネントにアクセスしたいと思います。

ここにいくつかのコード行があります:

BodyContent.tsには次の内容が含まれています:

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);
    } 
}

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(){};
 }

最後に、コメントで提案されたテンプレートを以下に示します。

本文コンテンツ.html

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

フィルタータイル.html

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

FilterTiles.html テンプレートはico-filter-tilesタグに正しく読み込まれています(実際にヘッダーを確認できます)。

注:BodyContentクラスは、次のコードを使用して別のテンプレート (Body) 内に挿入されますDynamicComponetLoader: dcl.loadAsRoot(BodyContent, '#ico-bodyContent', injector)。

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);
   } 
}

問題は、ftコンソール ログに書き込もうとすると、 が表示されundefined、当然ながら、「tiles」配列内に何かをプッシュしようとすると例外「「undefined」のプロパティ tiles がありません」」が表示されることです。

もう 1 つ:FilterTilesコンポーネントの HTML テンプレートを確認できるので、コンポーネントは正しく読み込まれているようです。

助言がありますか？

ベストアンサー1

私も同様の問題を抱えていたので、他の誰かが同じ間違いをした場合に備えて投稿しようと思いました。まず、考慮すべき点の 1 つはAfterViewInit、 にアクセスする前にビューが初期化されるのを待つ必要があるということです@ViewChild。しかし、私の は@ViewChildまだ null を返していました。問題は私の でした*ngIf。*ngIfディレクティブがコントロール コンポーネントを強制終了していたため、参照できませんでした。

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
  }
}

編集
前述の通り@Ashg 下解決策としては、@ViewChildrenの代わりにを使用することです@ViewChild。

おすすめ記事