Angular 5 动态创建的组件交互答案

【问题标题】：Angular 5 dynamic created component interactionAngular 5 动态创建的组件交互
【发布时间】：2018-01-12 14:42:31
【问题描述】：

我想要达到的目标：

第一个组件创建并将“项目”实例发送到服务器，之后我需要告诉另一个组件（包含现有项目的项目树）更新树。我试图在 EventEmitter 的帮助下做到这一点，但没有任何反应。显然，如果动态创建发射器组件，这将不起作用。

有什么办法可以解决这个问题？

动态创建的组件：

export class AddProjectComponent implements OnInit {

  newProject: Project;
  newProjectData: NewProjectDataResponse;

  @Output() onProjectAdd = new EventEmitter();

  constructor(private projectService: ProjectsService) {
  }

  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.onProjectAdd.emit();
  }

和父组件：

export class ProjectsComponent implements OnInit {

  component: Type<any>;
  injector: Injector;

  private showWp: boolean;

  constructor(private inj: Injector) {
  }

  ngOnInit() {
    this.showWp = false;
  }

  loadProjectDetails(basicProj: BasicProject): void {

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

  updateProjectsTree() {
    console.info('Update tree');
  }
}

父组件的模板：

<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" (onProjectAdd)="updateProjectsTree($event)"></ng-container>
  </div>
</div>

【问题讨论】：

标签： angular

【解决方案1】：

我找到了解决方案 - 使用专门的服务。服务看起来像：

@Injectable()
export class TreeUpdateService {

  private update = new Subject();
  updateObservable = this.update.asObservable();

  upd() {
    this.update.next();
  }
}

动态创建的comp。服务实施后：

export class AddProjectComponent implements OnInit {

  newProject: Project;
  newProjectData: NewProjectDataResponse;

  constructor(private projectService: ProjectsService, private updateTreeService: TreeUpdateService) {
  }

  onSubmit() {
    this.projectService.addNewProject(this.newProject).subscribe(
      response => {
        alert('Project has been saved successfully');
        this.updateTreeService.upd();
      },
      error => {
        if (error.status === 406) {
          alert('Project with name: ' + this.newProject.name + ' exists already.');
        } else {
          alert('Unknown error has occur.');
        }
      }
    );
  }

以及要更新的组件：

export class ProjectsTreeComponent implements OnInit {

  constructor(private projectsService: ProjectsService, private updateTreeService: TreeUpdateService) {
    this.updateTreeService.updateObservable.subscribe(
      data => {
        this.updateProjectsTree();
      }
    );
  }

【讨论】：