引发事件时，如何从 DOM 中删除（而不是隐藏）Angular 子元素？答案

【问题标题】：How can I remove (not hide) an Angular child element from DOM when it raises an event?引发事件时，如何从 DOM 中删除（而不是隐藏）Angular 子元素？
【发布时间】：2017-08-22 14:15:02
【问题描述】：

我正在通过*ngFor 指令创建子元素列表（不使用 ComponentFactory）像这样的：

 <ul class="nav navbar-nav">
   <top-menu #topmenu *ngFor="let menu of menus" (onDeleteMe)="handleDeleteMenu($event)">
  </top-menu>
</ul>

现在我希望 handleDeleteMenu 从 DOM 中删除该组件。这可能吗？还是我应该更改模板以使用组件工厂创建组件？

【问题讨论】：

您的意思是从 DOM 中删除，还是从 ngFor 中使用的数组中完全删除该项目？不同之处在于仅从 DOM 中删除将允许您稍后添加它，从数组中删除将永远删除它。
感谢@Z.Bagley 指出这一点。我想保留重新添加它的能力，所以是的，只是来自 DOM
当然。我的答案中的方法遵循此方法。请注意，当您在 html 中引用元素时，您不会使用 this 处理程序。

标签： angular

【解决方案1】：

您可以将 ngFor 迭代的索引传递给您的 onDeleteMe 方法

<top-menu #topmenu *ngFor="let menu of menus; let i = index" (onDeleteMe)="handleDeleteMenu($event, i)">

然后在你的方法中拼接出迭代

handleDeleteMenu(event, index){
    this.menus.splice(index, 1);
}

这将从您的数组中删除该特定迭代并重新渲染 ngFor。这是一个演示 plunkr https://plnkr.co/edit/qphEdumLB7Eenb3FPtL5?p=preview

【讨论】：

【解决方案2】：

您需要在 ngFor 中添加一个额外的 div、一个索引，并在内部元素中添加一个 ngIf：

<ul class="nav navbar-nav">
   <ng-container *ngFor="let menu of menus; let i = index;">
     <top-menu
       #topmenu
       (onDeleteMe)="handleDeleteMenu($event);showMenu[i]=false;" 
       *ngIf="showMenu[i]">
     </top-menu>
  </ng-container>
</ul>

在你的组件打字稿中，在 onInit 中添加一个显示索引：

showMenu = []
ngOnInit() {
  for( let i = 0; i < this.menus; i++ ) {
    this.showMenu.push(true);
  }
}

您也可以只向this.menus 添加一个新对象，而不是创建showMenu。

【讨论】：

【解决方案3】：

是的，这是可能的。但首先你不应该像 this.menus 那样给予。应该是*ngFor="let menu of menus"。在handleDeleteMenu() 函数中，从menus 数组中弹出元素。 ngFor 指令将使用新的元素数组自动重新渲染。

【讨论】：

【解决方案4】：

*ngIf 从 dom 树中删除 dom 元素，但不能在同一标签中使用 *ngFor 和 *ngIf。您可以创建另一个标签并将 *ngIf 和其中您

 <ul class="nav navbar-nav">
   <div *ngIf="menus && menu.length > 0">
    <top-menu #topmenu *ngFor="let menu of menus" (onDeleteMe)="handleDeleteMenu($event)">
    </top-menu>
  </div>
</ul>

此外，在您的代码中，this.menus 将只是菜单，因为它在视图中而不是在组件类中

【讨论】：

OP 只需要删除被点击的特定元素。
问题的最后一部分，现在我希望 handleDeleteMenu 从 DOM 中删除组件。这可能吗？还是我应该更改模板以使用组件工厂创建组件？
他想从迭代中删除没有完成的任何特定元素的子组件。问题标题也是删除 dom 元素而不是数组元素。
再次理解这个问题先生:)
@Faisal 问题不清楚。标题说删除一个子组件，但随后他请求听起来像是删除 DOM（而不是使用 hidden），但他可能也在寻找 splice()。