angular 8：用于多个视图子引用的单个 ng-container

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 装饰器仅适用于一个 child。要获得 children 数组，您需要使用 @ViewChildren

这样试试：

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

angular 8：用于多个视图子引用的单个 ng-container

angular 8: single ng-container for multiple view child references

dom

viewchild

angular

ng-container