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

Question

希望有人能赐教

问题

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

@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(){}
}

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

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

任何想法都会有所帮助。

提前致谢！ :)

Answer 1

问题是 @ViewChild 只能围绕组件 DOM 工作，但无法访问其子组件的 DOM，这会破坏组件之间的封装。在这种情况下，appSonDirective 是在 AppSonComponent DOM 中声明的，但是因为您试图从 AppParentComponent 访问它，所以 returns 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)
  }

}

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

Angular 8 - @ViewChild returns undefined on parent component. (no nested ngIf and called in ngAfterViewInit)

javascript

angular

typescript

viewchild

问题

预计

实际

复制

情况

代码

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

Angular 8 - @ViewChild returns undefined on parent component. (no nested ngIf and called in ngAfterViewInit)

javascript

angular

typescript

viewchild

问题

预计

实际

复制

情况

代码

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