Это правильное использование ng-контейнера?

Question

У меня есть 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

Answer 1

Пока это служит цели, на самом деле не существует неправильного использования ng-container. Все, что он делает - это предоставляет элемент в HTML, с которым вы можете делать angular, но на самом деле он не отображается на странице.

При этом, если ваша цель состоит в том, чтобы элементы app-new и элементы app-exist были братьями и сестрами, это абсолютно правильное использование.

Но позвольте мне отметить вам, вероятно, было бы лучше использовать сокращенную запись ngIf из *ngIf="condition". * указывает, что это структурная директива , которая позволяет angular знать, как использовать шаблон для внутренних элементов.

Это вызывает самый распространенный случай использования ng-container , Поскольку структурные директивы могут изменять элементы, содержащиеся в нем, вы можете иметь только одну из них на элемент. Поэтому, когда вам нужно иметь несколько структурных директив, вы можете вкладывать их с помощью ng-container s.