动态添加子组件后，如何调用父组件方法实现自身移除？

方法一：通过EventEmitter传递事件（推荐，低耦合） #

这种方式遵循Angular组件通信的最佳实践，子组件仅负责触发关闭事件，父组件处理组件销毁逻辑，解耦性强。

1. 修改OverviewComponent，添加输出事件

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

export class OverviewComponent implements OnInit {
  // 定义输出事件，用于通知父组件关闭
  @Output() close = new EventEmitter<void>();

  constructor() { }

  ngOnInit(): void { }

  onClose() {
    // 触发关闭事件，通知父组件
    this.close.emit();
  }
}

2. 修改ExploreComponent，监听事件并销毁组件

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { OverviewComponent } from './overview.component';

export class ExploreComponent implements OnInit {
  constructor(public viewContainerRef: ViewContainerRef) { }

  ngOnInit(): void { }

  onItemSelected() {
    // 创建组件并获取组件引用
    const componentRef = this.viewContainerRef.createComponent(OverviewComponent);
    // 监听子组件的close事件，触发时销毁组件
    componentRef.instance.close.subscribe(() => {
      componentRef.destroy();
    });
  }
}

方法二：直接注入父组件引用（不推荐，高耦合） #

这种方式会让子组件直接依赖父组件，耦合度高，不利于后续维护和复用，仅作为备选方案：

import { Component, OnInit, Injector } from '@angular/core';
import { ExploreComponent } from './explore.component';

export class OverviewComponent implements OnInit {
  constructor(private injector: Injector) { }

  ngOnInit(): void { }

  onClose() {
    // 获取父组件实例
    const parentComponent = this.injector.get(ExploreComponent);
    // 找到当前组件在父容器中的索引
    const componentIndex = parentComponent.viewContainerRef.indexOf(this.hostView);
    if (componentIndex !== -1) {
      // 从父容器中移除当前组件
      parentComponent.viewContainerRef.remove(componentIndex);
    }
  }
}

注意：方法二中需要确保ExploreComponent的viewContainerRef是可访问的（比如保持public修饰符），但这种写法会让子组件和父组件强绑定，不建议在生产环境中使用。

内容的提问来源于stack exchange，提问作者TDev