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

Question

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

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

如何使用打字稿或 scss 删除包装器（父元素）而不删除 Angular 中的子元素？（如果两者都可行，请展示这两种方法）。

例如，如何以编程方式从

操作下面的dom

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

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

至：（点击按钮后我希望 dom 看起来像下面）

<span>This is It!</span>

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

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

Answer 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

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

Angular: How can I remove wrapper (parent element) without removing the child?

html

angular

typescript

dom

dom-manipulation