如何有条件地删除包装 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 demo

我知道我可以使用 <ng-template> 和 *ngIf 来做到这一点，但是包装器有很多子级，它会使文件的大小加倍并降低可读性。

Answer 1

这种方法似乎过于复杂，因为您的内容还包含您自己的组件。相反，您可以将此逻辑移动到一个单独的组件中，这将使您的代码简洁明了。创建一个组件，例如conditional-wrapper，并将其添加到您的模块中。在组件中只需放置一个基本的Input 以接受来自父级的wrapperElement。

@Input() wrapperElement: boolean;

在模板中，只需添加代码以使用ngSwitch 有条件地将任何element 显示为包装器或没有包装器作为默认值。

<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 做剩下的事情