Angular 5动态创建组件交互问题：如何触发项目树更新

我明白你遇到的问题了——当用ngComponentOutlet动态创建AddProjectComponent时，组件里的@Output事件没法被父组件捕获，导致项目树没法更新。这是因为ngComponentOutlet本身不支持直接绑定动态组件的输出事件，模板里的(onProjectAdd)语法在这里不会被Angular解析，所以你的事件触发完全没被父组件接收到。

下面给你两种可行的解决方案：

1. 共享服务（RxJS Subject）——推荐 #

这种方式是Angular中跨组件通信的标准方案，尤其是动态组件场景，扩展性强，适合多个组件需要监听同一事件的情况。

步骤1：创建共享事件服务 #

首先创建一个全局服务，用来传递项目添加的通知：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ProjectEventService {
  // 创建一个Subject作为事件源
  private projectAddedSource = new Subject<void>();
  // 暴露为Observable，防止外部直接调用next()
  projectAdded$ = this.projectAddedSource.asObservable();

  // 发送项目添加完成的通知
  notifyProjectAdded() {
    this.projectAddedSource.next();
  }
}

步骤2：修改AddProjectComponent #

去掉原来的@Output，注入共享服务，在提交后发送通知：

export class AddProjectComponent implements OnInit {
  newProject: Project;
  newProjectData: NewProjectDataResponse;

  constructor(
    private projectService: ProjectsService,
    private projectEventService: ProjectEventService // 注入共享服务
  ) { }

  ngOnInit() {
    this.newProjectData = new NewProjectDataResponse();
    this.newProject = new Project();
    this.projectService.getNewProjectData()
      .subscribe(result => this.newProjectData = result, error => this.newProjectData.error = 'Error!' );
  }

  onSubmit() {
    this.projectService.addNewProject(this.newProject);
    // 用服务发送更新通知
    this.projectEventService.notifyProjectAdded();
  }
}

步骤3：修改父组件ProjectsComponent #

注入共享服务，订阅事件，同时记得在组件销毁时取消订阅防止内存泄漏：

import { Subscription } from 'rxjs';
import { ProjectEventService } from './path-to-project-event.service';

export class ProjectsComponent implements OnInit, OnDestroy {
  component: Type<any>;
  injector: Injector;
  private showWp: boolean;
  private projectAddedSubscription: Subscription;

  constructor(
    private inj: Injector,
    private projectEventService: ProjectEventService
  ) { }

  ngOnInit() {
    this.showWp = false;
    // 订阅项目添加完成的事件
    this.projectAddedSubscription = this.projectEventService.projectAdded$.subscribe(() => {
      this.updateProjectsTree();
    });
  }

  ngOnDestroy() {
    // 销毁订阅
    if (this.projectAddedSubscription) {
      this.projectAddedSubscription.unsubscribe();
    }
  }

  loadProjectDetails(basicProj: BasicProject): void {
    this.component = ProjectComponent;
    this.injector = Injector.create([{provide: BasicProject, useValue: basicProj}], this.inj);
  }

  // 补充加载AddProjectComponent的方法（你的模板里有这个按钮，应该补上）
  loadAddProject(): void {
    this.component = AddProjectComponent;
    this.injector = Injector.create([], this.inj);
  }

  updateProjectsTree() {
    console.info('Update tree');
    // 这里可以调用项目树组件的刷新逻辑，比如通过@ViewChild获取组件实例后调用方法
  }
}

步骤4：更新父组件模板 #

去掉无效的(onProjectAdd)绑定：

<div class="basicContainer">
  <div class="projectsTreeContainer">
    <input type="text" id="searchWord" placeholder="Search through projects"/>
    <button (click)="loadAddProject()">Add new Project</button>
    <app-projects-tree 
      (onLoadProjectDetails)="loadProjectDetails($event)" 
      (onLoadWpDetails)="loadWpDetails($event)" 
      (onSelectAndLoadJobDetails)="loadJobDetails($event)">
    </app-projects-tree>
  </div>
  <div class="infoContainer">
    <ng-container *ngComponentOutlet="component; injector: injector"></ng-container>
  </div>
</div>

2. 通过Injector传递回调函数 #

如果不需要全局事件，只是父子组件之间的单次通信，可以通过Injector把父组件的回调函数注入到动态组件中。

步骤1：定义InjectionToken（可选但推荐） #

为了避免字符串令牌的潜在冲突，定义一个类型安全的InjectionToken：

import { InjectionToken } from '@angular/core';

export const PROJECT_ADD_CALLBACK = new InjectionToken<() => void>('ProjectAddCallback');

步骤2：修改父组件的loadAddProject方法 #

创建回调函数并注入到动态组件的Injector中：

import { PROJECT_ADD_CALLBACK } from './path-to-token';

// ...

loadAddProject(): void {
  // 定义回调函数
  const projectAddCallback = () => this.updateProjectsTree();
  this.component = AddProjectComponent;
  // 创建包含回调的Injector
  this.injector = Injector.create(
    [{ provide: PROJECT_ADD_CALLBACK, useValue: projectAddCallback }],
    this.inj
  );
}

步骤3：修改AddProjectComponent #

注入回调函数，在提交时调用：

import { Inject } from '@angular/core';
import { PROJECT_ADD_CALLBACK } from './path-to-token';

export class AddProjectComponent implements OnInit {
  newProject: Project;
  newProjectData: NewProjectDataResponse;

  constructor(
    private projectService: ProjectsService,
    @Inject(PROJECT_ADD_CALLBACK) private projectAddCallback: () => void
  ) { }

  // ...其他代码不变

  onSubmit() {
    this.projectService.addNewProject(this.newProject);
    // 调用父组件的回调
    this.projectAddCallback();
  }
}

为什么原方法无效？ #

ngComponentOutlet是一个用来动态渲染组件的指令，它的模板语法不支持直接绑定动态组件的@Output事件——Angular不会解析你写的(onProjectAdd)，所以你的事件触发完全不会被父组件接收到。上面两种方法都是绕开这个限制的标准做法。

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