这是 ng-container 的正确用法吗？

Question

我有一个 Product 组件和一个子 ShareButton 组件：

<app-product>
   <app-share-button (click)="click($event)"></app-share-button>
</app-product>

当我点击 ShareButton 时，它 returns 通过以下方式向父组件发送数据：click($event)`:

public click($event) {
     this.typeAction = $event.type;
}

像这样在父组件中使用ng-container是个好主意吗：

<app-product>
   <app-share-button (click)="click($event)"></app-share-button>
   <ng-container [ngIf]="typeAction === 'new'">
        <app-new [type]="1"></app-new>
        <app-new [type]="2"></app-new>
   </ng-container>

    <ng-container [ngIf]="typeAction === 'new'">
         <app-exist [type]="1"></app-exist>
         <app-exist [type]="2"></app-exist>
     </ng-container>
</app-product>

是否应该对此进行简化或者这是 ng-container 的有效用例？

Answer 1

只要有用，ng-container 就没有真正的错误用法。它所做的只是在 HTML 中提供一个元素，您可以对其执行 angular 操作但实际上不会呈现到页面。

也就是说，如果您的目标是让 app-new 元素和 app-exist 元素成为兄弟姐妹，这绝对是正确的用法。

但我要指出，您最好使用 ngIf of *ngIf="condition". The * indicates that it is a structural directive 的 shorthand 表示法，让 angular 知道为内部元素使用模板。

这带来了 ng-container 最常见的用例。由于结构指令可以更改其中的元素，因此每个元素只能有一个。所以，当你需要有多个结构指令时，你可以用 ng-containers.

嵌套它们

这是 ng-container 的正确用法吗？

Is this the right usage of ng-container?

angular

angular6

angular8