angular - 角度 8：用于多视图子引用的单个 ng 容器

Question

我的组件中有三个 viewchild 装饰器，如下所示：

@ViewChild('propertiesPage1', { read: ViewContainerRef, static: true }) propertiesPage11: ViewContainerRef;
@ViewChild('propertiesPage2', { read: ViewContainerRef, static: true }) propertiesPage22: ViewContainerRef;
@ViewChild('propertiesPage3', { read: ViewContainerRef, static: true }) propertiesPage33: ViewContainerRef;

这些的引用在我的 html 文件中提供，如下所示：

<div>
  <ng-container #propertiesPage1>
  </ng-container>
</div>
<div>
  <ng-container #propertiesPage2>
  </ng-container>
</div>
<div>
  <ng-container #propertiesPage3>
  </ng-container>
</div>

我想将所有三个容器合并为一个容器，并且 ng-container 应该只包含对最近更改的 viewchild 的引用。像这样的东西：

<div>
  <ng-container #propertiesPage>
  </ng-container>
</div>

我怎样才能实现它？

Answer 1

@ViewChild装饰师仅适用于一个孩子。要获得您需要使用的孩子数组@ViewChildren

试试这样：

 @ViewChildren('propertiesPage') pages: QueryList<ViewContainerRef>