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

Question

希望有人能赐教。

问题

我需要获取对放置在内部组件中的指令的引用。我正在使用带有 {static:true} 的 @ViewChild targeting Directive 类，因为它不必等待状态更改并稍后在用户单击按钮时在 lifecicle 上使用它。

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

预计

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

实际

childRef 未定义

我研究过类似的问题，似乎都是因为 ref 在 *ngIf 中，应该是 {static: false};或者因为 ref 打算在它被获取之前使用(在 ngAfterViewInit 钩子(Hook)之前)。事实并非如此，这种情况相当简单，但无法找出问题所在! :/

复制

情况

所以，我得到了两个组件和一个指令。让我们称它们为 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(){}
}

注意:如果我将 View 子引用移动到子组件，它就可以被访问。问题似乎出在父组件 (?)

无论如何... here是重现代码(它有一些日志可以知道发生了什么)

任何想法都会有所帮助。

提前致谢! :)

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