Как условно убрать упаковочный div и сохранить его дочерние?

Question

Я хочу создать структурную директиву с именем showWrapperIf, которая либо сохраняет весь элемент и дочерние элементы, на которых он находится, либо, когда условие true, удаляет элемент (оболочку), на котором она находится, и принимает вседети и держать его в DOM.

Итак, результат этого

<div *showWrapperIf="true">
    <h2></h2>
    <p></p>
    <any-component></any-component>
</div>

будет

<div>
    <h2></h2>
    <p></p>
    <any-component></any-component>
</div>

но, если condition это false, только дети должны отображаться.Например:

<h2></h2>
<p></p>
<any-component></any-component>

Демонстрация StackBlitz

Я знаю, что могу сделать это с <ng-template> и *ngIf, но у обертки много детей, было быудвоить размер файла и сделать его менее читаемым.

Answer 1

Этот подход кажется слишком сложным, поскольку ваш контент также содержит ваши собственные компоненты.Вместо этого вы можете переместить эту логику в отдельный компонент, который сделает ваш код аккуратным и лаконичным.Создайте компонент, скажем conditional-wrapper, и добавьте его в свой модуль.В компонент просто поместите базовый Input, чтобы принять wrapperElement от родителя.

@Input() wrapperElement: boolean;

В шаблоне просто добавьте код, чтобы условно отображать любой element как оболочку или без оболочки какпо умолчанию используется ngSwitch.

<ng-container [ngSwitch]="wrapperElement">
    <div *ngSwitchCase="'div'">
        <ng-container *ngTemplateOutlet="noWrapper"></ng-container>
    </div>
    <h2 *ngSwitchCase="'h2'">
        <ng-container *ngTemplateOutlet="noWrapper"></ng-container>
    </h2>
    <ng-container *ngSwitchDefault>
        <ng-container *ngTemplateOutlet="noWrapper"></ng-container>
    </ng-container>
</ng-container>

<ng-template #noWrapper>
    <ng-content></ng-content>
</ng-template>

Теперь все, что вам нужно, это рекурсивно показать conditional-wrapper из родительского компонента, а ng-content покажет данные проекта из родительского компонента в дочерний.

<conditional-wrapper [wrapperElement]="condition ? 'div': ''">
    <h2>Child 1</h2>
    <p>Child 2</p>
    <footer>Child 3</footer>
    <conditional-wrapper [wrapperElement]="condition ? 'div': ''">
        <p>Nested Child 4</p>
    </conditional-wrapper>
</conditional-wrapper>

Вот рабочий пример для StackBlitz .

Answer 2

Я не думаю, что вы можете сделать это.Обратите внимание, что когда хорошо документированного углового пути недостаточно, вы, возможно, движетесь в неверном направлении!

В любом случае, что-то, что может приблизиться к тому, что вам нужно (я думаю), это добавить класс наХост-элемент!

Вы можете сделать это следующим образом

this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.templateRef);

if (this.condition) {
  const elementRef = (this.viewContainer.get(0) as any)
     .rootNodes[0] as ElementRef;
  this.renderer.addClass(elementRef, "myclass");
}

stackblitz

, а вы можете сделать все остальное с помощью css