问题描述: 在Angular中,使用ViewChild获取子组件时,如果使用指令作为选择器,有时会返回undefined。
解决方法:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent implements AfterViewInit {
@ViewChild(ChildComponent) childComponent: ChildComponent;
ngAfterViewInit() {
// 子组件已经加载完毕,可以获取到子组件实例
console.log(this.childComponent);
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export class ChildComponent {
// 子组件的逻辑
}
import { Directive } from '@angular/core';
@Directive({
selector: '[appCustomDirective]' // 唯一的选择器
})
export class CustomDirective {
// 指令的逻辑
}
综上所述,以上是解决Angular使用指令作为选择器的ViewChild返回undefined的方法。