Angular：如何在不删除子元素的情况下删除包装器（父元素）？

Posted 2023-03-13

【中文标题】Angular：如何在不删除子元素的情况下删除包装器（父元素）？

【英文标题】：Angular: How can I remove wrapper (parent element) without removing the child?

【发布时间】：2019-10-23 14:10:16

【问题描述】：

我见过this answer，但它回答 jquery 而不是 angular/typescript。

我的问题类似于this question，但我的问题是寻求角度的解决方案。

如何在不使用 typescript 或 scss 删除 Angular 中的子元素的情况下删除包装器（父元素）？ （如果两者都可以，请同时显示这两种方法）。

例如如何以编程方式操作下面的 dom

<div class="wrapper">
  <span>This is It!</span>
</div>

<div class="button">Remove wrapper</div>

to：（点击按钮后，我希望 dom iook 如下所示）

<span>This is It!</span>

<div class="button">Remove wrapper</div>

编辑： 还请展示如何设置它，以便当我再次单击按钮时它可以添加包装器 div。基本上是切换包装器 div。

【问题讨论】：

你看过*NgIf吗？

*ngIf 将摆脱包装 div 和它的孩子，这不是我正在寻找的解决方案。

这是一个解决方案。如果/否则！

请举个例子，以便我更好地理解。

你指的是这个：ultimatecourses.com/blog/angular-ngif-else-then?

【参考方案1】：

我认为你可以使用 ng-template 和两个 div 来模拟，有些像

<div *ngIf="toogle" class="wrapper">
    <ng-content *ngTemplateOutlet="template"></ng-content>
</div>

<ng-content *ngTemplateOutlet="!toogle?template:null"></ng-content>

<ng-template #template>
    <hello name=" name "></hello>
</ng-template>
<button (click)="toogle=!toogle">toogle</button>

查看example in stackblitz