Angular2 - 来自指令的 ViewChild

Question

我有一个名为 EasyBoxComponent 的组件，和一个带有此 @Viewchild 的 @Directive:

@ViewChild(EasyBoxComponent) myComponent: EasyBoxComponent;

我认为这是正确的语法，但 this.myComponent 始终未定义。

---

完整代码如下:

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

Answer 1

ContentChild 使用 AfterContentInit 接口(interface)，所以模板应该是这样的:

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

和@Directive:

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