Tengo un componente con el nombre EasyBoxComponent y una @Directive con este @Viewchild :
@ViewChild(EasyBoxComponent) myComponent: EasyBoxComponent; Pensé que esta era la sintaxis correcta, pero this.myComponent siempre está indefinido.
Aquí está el código completo:
<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); } }ContentChild funciona con la interfaz AfterContentInit , por lo que la plantilla debería ser como:
<p myEasyBox data-href="URL"> <my-easybox></my-easybox> </p> y la @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); } }Dado que el componente no es el elemento secundario de la directiva, el selector secundario no funcionará.
En su lugar, utilice referencias:
<my-easybox #myBox></my-easybox> <p [myEasyBox]="myBox" data-href="URL">My Directive</p> @Input('myEasyBox') myComponent: EasyBoxComponent;