Question

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

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

如何在不使用打字稿或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：如何在不删除子级的情况下删除包装器（父元素）？

1 个答案: