时间戳

首页 > 解决方案 > Angular 9 在父组件的路由器出口中动态加载表单组件（创建/编辑）

angular - Angular 9 在父组件的路由器出口中动态加载表单组件（创建/编辑）

问题描述

用例：我们有不同的形式来创建和编辑公司的突变（例如 AddressChange）。因此，您可以在下拉列表中选择突变类型（例如 AddressChange），然后您将被重定向到相应的突变形式（例如 AddresschangeForm）。

我为每个表单创建了一个组件（AddressChange、CEOChange...）和两个包装组件（创建和编辑），只有按钮（创建、保存...）将突变对象发送到服务器。

现在我可以通过 url 将表单加载到router-outletcreate-component/edit-component 中：
/mutations/create/AddressChanges
/mutations/edit/CEOChange/123

似乎我无法调用路由器出口本身的事件发射器来从表单组件触发包装器组件。

创建-component.html：
<router-outlet (mutationChanged)="mutationChanged($event)"></router-outlet>

所以我想知道这是否真的是处理这种情况的正确方法，或者是否最好在 create-component 和 edit-component 中定义所有组件并使用 ngIf 来决定哪个应该可见？我做了一个插图来理解用例。 在此处输入图像描述

标签： angular

解决方案

第一个apporch完全没问题，

您应该使用 Service 来处理组件之间的通信，

也许是一个主题和一个可观察的

例如

import { map, shareReplay, filter, startWith } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class StateFacadeService {
  private someSubject = new Subject<any>();

  public someObs$ = this.someSubject.asObservable().pipe(shareReplay());

  constructor() {}

  public mutationChanged(mutation: any): void {
    this.someSubject.next(mutation);
  }
}

在每个表单组件中

  constructor(private state: StateFacadeService) {}

makeChanges(mutation: any): void {
  this.state.mutationChanged(mutation)
}

并在部分组件中

  public changes$  = this.state.someObs$


  constructor(private state: StateFacadeService) {}


noOnInit(): void {

  // TODO handel unsubscribe

  this.changes$.subscribe((changes: ant): void => {
    /** DO Somthing Amazing */
  })
}

推荐阅读