如何在引发事件时从DOM中删除（不隐藏）Angular子元素？

Question

我正在通过*ngFor指令创建一个子元素列表（不是与ComponentFactory）这样的东西：

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

现在我想handleDeleteMenu从DOM中删除组件。 这有可能吗？ 或者我应该更改模板以使用组件工厂创建组件？

Answer 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。 这是一个演示插件https://plnkr.co/edit/qphEdumLB7Eenb3FPtL5?p=preview

Answer 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中添加一个show index：

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

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

Answer 3

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

Answer 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将只是菜单，因为它在视图中不在组件类中