通过父组件以编程方式移除子组件

Question

我想知道是否可以在 Angular 2 中执行以下操作。使用此模板的组件（例如）：

父组件模板

<div>
  <childOne></childOne>

  <childTwo *ngFor="let item of items">
    whatever
  </childTwo>
</div>

有没有办法使用 ParentComponent 中的 ViewContainerRef 删除这些项目，如下所示？

var viewContainerRef = /* get ParentComponent ViewContainerRef */
var index = viewContainerRef.indexOf(childViewRef);
viewContainerRef.remove(index);

我尝试使用类似于此处提出的解决方案来检索子 ViewRef： Angular2 , How to find index of a view inside a viewContianer

但是 indexOf 返回 -1，好像容器中不存在子 ViewRef。

我想在 ParentComponent 之外删除这些子组件，而不是在 ParentComponent 代码中，例如从 items 数组中删除或通过绑定。

我也尝试使用渲染器中的 destroyView 方法，但没有效果。 NgFor 正在遍历 items 数组并为每个 childTwo 创建嵌入式视图，如果在这种情况下，从 ChildTwo 注入器（如链接解决方案中提出的）获得的 ViewRef 与这些 EmbeddedViewRef 相同，我不这样做。

有什么办法可以做这样的事情吗？

谢谢。

**************************** 更新 *********************** ****

我会尽量简化我想要实现的目标。我正在开发一个仪表板，用户可以在其中使用如下 API 创建其组件：

@Component({ selector: 'child' })
class UserChildComponent extends DashboardComponent {
  (...)
}

@Component({ selector: 'parent' })
class UserParentComponent extends DashboardComponent {

  @ViewChildren(UserChildComponent) m_children: QueryList<UserChildComponent>;

  private models: Array<ChildModel>;

  (...)
}

/* UserParentComponent template
<div>
  <child></child>
  <child *ngFor="let model of models"></child>
</div>

我有一个所有仪表板组件及其相互关系（父/子）的逻辑树，因为这里不涉及子类型和其他内容。

这是我正在考虑的场景：用户将能够删除任何这些子仪表板组件。我想拥有所有需要的关系树，从父级中删除子级并通知用户（可能通过父级中的 ViewChildren）。或者我实际上可以在父级上调用一个方法，以便用户可以更新其模型数组，这可能是最好的方法。

我只是在想一种方法，让用户可以减少工作量，而不必担心同步模型\组件（在这种情况下）

再次感谢。

Answer 1

你可以使用

let element = querySelector(...);
element.parentNode.removeChild(element)

但不鼓励在 Angular2 中使用直接 DOM 访问。 Angular2 本身并没有提供你想要的 API。 在 Angular2 中，您应该只更新模型并让 Angular 进行 DOM 操作。

Answer 2

我能想到的一个可能的解决方案是创建一个具有如下事件发射器的服务：

export class ChildRemoveNotifierService{

     public $remove = new EventEmitter<string>();

}

然后，我们需要一个可以删除元素并同时创建它们的指令：

 @Directive({ selector: '[remover]' })
export class RemoveDirective {

  @Input remove = '';
  constructor(
    private removerService:ChildRemoveNotifierService ,
    private _templateRef: TemplateRef,
    private _viewContainer: ViewContainerRef
    ) {


          let subscription =
          this.removerService.$remove.subscribe((tobeRemoved)=>{
             if(tobeRemoved===this.remove){
                 this._viewContainer.clear();
                 subscription.unsubscribe();
             }
          })
    }

然后，你会像这样使用它：

 <span *remover='my-component'>
     <my-component></my-component>
 </span>

基本上，任何需要动态移除的组件，都应该被 *remover 指令包裹。

然后，现在，everyOne 可以删除所有人 :)

你的父组件可以触发这样的事件：

export class ParentComponentOrAnyOther{

     constructor(private removerService:ChildRemoveNotifierService){

      }

      removeAComponent(){

          removerService.$remove.emit('my-component');

      }
}

这并不理想，或者可能是，我不知道。

但我知道这绝对是 Angular 的方式，而且你没有做任何 DOM 操作。

这样，你就拥有了 Angular2 的所有生命周期，特别是 onDestroy 事件将在 my-component 中触发。

编辑：

我认为这也可以：

  <my-component *remover='my-component'></my-component>