时间戳

首页 > 解决方案 > 这是 ng-container 的正确用法吗？

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

问题描述

我有一个Product带有子组件的ShareButton组件：

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

当我单击 时，它会通过： )`ShareButton将数据返回给父组件：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？

标签： angularangular6angular8

解决方案

只要它服务于某个目的，就没有真正不正确的使用ng-container. 它所做的只是在 HTML 中提供一个元素，您可以对它进行有角度的处理，但实际上并没有渲染到页面上。

话虽如此，如果您的目标是让app-new元素和app-exist元素成为兄弟姐妹，那么这绝对是正确的用法。

但是让我指出，您最好使用ngIf of的简写符号*ngIf="condition"。*表示它是一个结构指令，它让 Angular 知道为内部元素使用模板。

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

推荐阅读