angular - 来自父组件的 ngTemplateOutlet 的 ViewChild

Question

我有一个子组件，它接受 TemplateRef 作为 @Input 并通过 ngTemplateOutlet 显示它。如何使用 @ViewChild/@ViewChildren 检索模板内的组件？

如果模板在使用它的同一组件中声明，@ViewChild/@ViewChildren 可以正常工作，但它会使组件的动态性降低很多。

我也尝试过使用 @ContentChildren 但没有任何区别。

为了重现，我创建了一个 stackblitz。以下是部分代码:

child.component.html

<ng-container #fromParent [ngTemplateOutlet]="template"></ng-container>

child.component.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
})
export class ChildComponent implements AfterViewInit {
  @Input() template: TemplateRef<unknown>;
  @ViewChildren(HelloComponent) hello = new QueryList<HelloComponent>();

  ngAfterViewInit() {
    console.log('Has hello', this.hello.length > 0);
  }
}

parent.component.html

<ng-template #tmp> <hello name="{{ name }}"></hello> </ng-template>
<app-child [template]="tmp"> </app-child>

登录子组件返回false。

这里是 stackblitz:https://stackblitz.com/edit/angular-eopzyw?file=src/app/app.component.ts

谢谢。

Answer 1

这个很有意思，第一眼我也觉得应该可以访问，但是调试了一下发现:

父模板是父组件宿主视图的一部分，因此子组件中的 ViewChildren 将无法访问它，因为它不是子组件宿主视图的一部分。

请看下图，应用组件的主机 ID 为 165，父 ng 模板与其相关联。

因此，在 ViewChildren 的当前设计中，它似乎不支持查询从宿主视图传递的模板。打开功能请求可能是个好主意。