web-dev-qa-db-ja.com

Angular2-ディレクティブからのViewChild

EasyBoxComponentという名前のコンポーネントと、このビューの子を持つディレクティブがあります

@ViewChild(EasyBoxComponent) myComponent: EasyBoxComponent;

this.myComponentは常に未定義です

これは正しい構文だと思いました。

私のhtmlは

<my-easybox></my-easybox>
<p myEasyBox data-href="URL">My Directive</p>

import { Directive, AfterViewInit, HostListener, ContentChild } from '@angular/core';
import { EasyBoxComponent } from '../_components/easybox.component';

@Directive({
    selector: '[myEasyBox]'
})
export class EasyBoxDirective implements AfterViewInit {

    @ContentChild(EasyBoxComponent) myComponent: EasyBoxComponent;
    @ContentChild(EasyBoxComponent) allMyCustomDirectives;

    constructor() {
    }

    ngAfterViewInit() {
        console.log('ViewChild');
        console.log(this.myComponent);
    }

    @HostListener('click', ['$event'])
    onClick(e) {
        console.log(e);
        console.log(e.altKey);
        console.log(this.myComponent);
        console.log(this.allMyCustomDirectives);
    }

}
angularangular2-directives
8
Michalis

ContentChildはAfterContentInitインターフェイスと連携するため、テンプレートは次のようになります。

<p myEasyBox data-href="URL">
    <my-easybox></my-easybox>
</p>

およびディレクティブ：

@Directive({
  selector: '[myEasyBox]'
})
export class EasyBoxDirective implements AfterContentInit {
  @ContentChild(EasyBoxComponent) myComponent: EasyBoxComponent;
  @ContentChild(EasyBoxComponent) allMyCustomDirectives;

  ngAfterContentInit(): void {
    console.log('ngAfterContentInit');
    console.log(this.myComponent);
  }

  constructor() {
  }

  @HostListener('click', ['$event'])
  onClick(e) {
    console.log(e);
    console.log(e.altKey);
    console.log(this.myComponent);
    console.log(this.allMyCustomDirectives);
  }
}
10
Julia Passynkova

コンポーネントはディレクティブの子ではないため、子セレクターは機能しません。

代わりに、参照を使用してください

<my-easybox #myBox></my-easybox>
<p [myEasyBox]="myBox" data-href="URL">My Directive</p>

-

@Input('myEasyBox') myComponent: EasyBoxComponent;
0
forivall