Angular 8 - @ViewChild 在父组件上返回未定义。 （没有嵌套的 ngIf 并在 ngAfterViewInit 中调用）

Question

希望有人能启发我。

问题

我需要获取对放置在内部组件中的指令的引用。 我正在使用@ViewChild 针对指令 class，使用 {static:true}，因为它不必等待 state 更改并稍后在用户单击按钮时在生命周期中使用它。

@ViewChild(DirectiveClass, {static:true}) childRef : DirectiveClass;

预期的

在事件发生时在 childRef 实例变量中有指令引用。

实际的

childRef undefined

我对类似问题进行了研究，似乎都是因为 ref 在 *ngIf 内，应该是 {static: false}; 或者因为 ref 打算在它被获取之前使用（在 ngAfterViewInit 钩子之前）。 情况并非如此，这种情况相当简单，但又不会出错：：/

再生产

情况

所以，我有两个组件和一个指令。 让我们称它们为 ParentComponent 和 SonComponent。 指令应用在子组件中，所以我们称它为 SonDirective。

基本上就是这样的结构。

<app-parent>
  <app-son> </app-son> //<- Directive inside
</app-parent>

代码

//parent.component.ts
@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h2> parent </h2>
      <app-son></app-son>
    </div>
  `,
})
export class AppParentComponent implements AfterViewInit{

  @ViewChild(AppSonDirective,{static: true}) childRef : AppSonDirective;
  constructor() {}
  ngAfterViewInit() {
    console.log("childRef:",this.childRef)
  }
}

// son.component.ts
@Component({
  selector: 'app-son',
  template: `
    <div appSonDirective>
      <p> son <p>
    </div>
  `,
})
export class AppSonComponent {
  constructor() {}
}

//son.directive.ts
@Directive({
    selector: '[appSonDirective]'
})
export class AppSonDirective {
constructor(){}
}

注意：如果我将视图子引用移动到子组件，则可以访问它。 问题似乎出在父组件（？）

无论如何... 这是复制代码（它有一些日志可以知道发生了什么）

任何想法都会有所帮助。

提前致谢： ：）

Answer 1

问题是@ViewChild只能在组件 DOM 周围工作，但无法访问其子组件的 DOM，这会破坏组件之间的封装。 在这种情况下， appSonDirective在AppSonComponent DOM 中声明，但因为您试图从AppParentComponent访问它，它返回undefined因为AppParentComponent无法访问AppSonComponent DOM。 如果你有这样的东西，它可以工作：

<app-parent>
  <app-son appSonDirective></app-son> 
</app-parent>

一种解决方案是将指令公开为子组件的属性。 就像是：

@Component({
  selector: 'app-son',
  template: `
    <div appSonDirective>
      <p> son <p>
    </div>
  `,
})
export class AppSonComponent {
  @ViewChild(AppSonDirective,{static: true}) childRef : AppSonDirective;
  constructor() {}
}

然后在AppParentComponent

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h2> parent </h2>
      <app-son></app-son>
    </div>
  `,
})
export class AppParentComponent implements AfterViewInit{

  @ViewChild(AppSonComponent,{static: true}) son : AppSonComponent;
  constructor() {}
  ngAfterViewInit() {
    console.log("childRef:",this.son.childRef)
  }

}