如何将数据从子组件的守卫传递给父组件？

问题描述

我有一个父组件，它有一个带有链接的选项卡。每个选项卡都有一个链接，可以导航到子组件。父标签有一个标题数据，如客户姓名、dob、性别……

父组件 .HTML 如下所示：

 <mat-card>
    <mat-card-header>
      <mat-card-title>
        <mat-chip-list aria-label="Title" class="table_title">
          <mat-chip color="primary" selected>Client Detail</mat-chip>
          <mat-chip color="accent" *ngIf="clientName">Client Name: {{ clientName }}</mat-chip>
          <mat-chip color="accent" *ngIf="clientAlias">dob: {{ clientdob }}</mat-chip>
          <mat-chip color="accent" *ngIf="clientAlias">Gender: {{ clientGender }}</mat-chip>

        </mat-chip-list>
      </mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <nav mat-tab-nav-bar>
        <a mat-tab-link
          [routerLink]="['./demographics']"
          (click)="activeLink = 'demographics'"
          [active]="activeLink == 'demographics'">
          <mat-icon class="tab-icon">contact_page</mat-icon>
          Identifying information
        </a>
        <a mat-tab-link
          [routerLink]="['./contacts']"
          (click)="activeLink = 'contacts'"
          [active]="activeLink == 'contacts'">
          <mat-icon class="tab-icon">contacts</mat-icon>
          Contacts
        </a>
      </nav>

      <router-outlet></router-outlet>
    </mat-card-content>
  </mat-card>

路由器插座将根据选项卡名称呈现适当的子组件。

父组件 .ts 如下所示：

ngOnInit() {
    // Calling the resolver and updating the activeLink
    this.activeLink = this.route.snapshot.data.tab;

    // Set the header data
    this.route.data.subscribe(resolvedData => {
      if (resolvedData.headerData !== null) {
        this.clientName = resolvedData.headerData.fullName;
        this.clientdob = resolvedData.headerData.dob;
        this.clientGender = resolvedData.headerData.gender;
      } else {
        this.router.navigate(['/clients']);
      }
    });
  }

导航（呈现）子组件（人口统计）将让用户编辑客户信息，例如姓名、性别、dob。

客户人口统计页面（组件）的保存是使用保护（停用）完成的，这意味着除非数据有效，否则用户无法导航到联系页面或其他页面（标签）。

我的停用守卫如下所示：

if (model.dirty && model.valid) {
      // call the saving service
      this.clientService.UpdateClientIdentInfo(personId,model.getRawValue()).subscribe(updatedHeaderData => {
        // Todo: PASS updatedHeaderData TO THE PARENT COMPOENET
        this.snackBar.open('Data has been saved successfully!','',{
          duration: 2000,horizontalPosition: 'center',verticalPosition: 'bottom',panelClass: ['snack-success']
        });
        return true;
      },error => {
        return false;
      })
    }

此 API 调用的响应 updatedHeaderData 将包含我想要传递给父组件的新数据，以便更新其所有标头数据。

这是我的应用路由模型

{
    path: 'clients/:id',component: ClientDetailsComponent,resolve: {
      tab: ClientDetailsResolver,headerData: ClientDetailHeaderDataResolver
    },children: [
      {
        path: 'demographics',component: ClientIdentInfoComponent,resolve: { client: ClientIdentInfoResolver },canDeactivate: [ ClientIdentInfoGuard ]
      },{
        path: 'contacts',component: ClientContactComponent,resolve: { PersonContacts: ClientContactsResolver},canDeactivate: [ ClientContactsGuard ]
      },{
        path: '',redirectTo: 'demographics',pathMatch: 'full'
      }
    ]
  },

解决方法

在此处使用服务。像这样的东西。

HeaderDataService

private pHeaderData: Subject<any> = new Subject<any>();

get headerData(): Observable<any> | any {
    return this.pHeaderData.asObservable();
}

set headerData(data: any) {
    this.pHeaderData.next(data);
}

父组件

const subscription: Subscription = new Subscription();

constructor(private headerDataService: HeaderDataService) { }

ngOnInit(): void {
    this.subscription.add(
        this.headerDataService.headerData.subscribe( data => {
            console.log('delivery from ChildComponent arrived: ',data);
        })
    );
}

ngOnDestroy(): void {
    this.subscription.unsubscribe();
}

子组件

constructor(private headerDataService: HeaderDataService) { }

if (model.dirty && model.valid) {
  // call the saving service
  this.clientService.UpdateClientIdentInfo(personId,model.getRawValue()).subscribe(updatedHeaderData => {

    // inform the parent
    this.headerDataService.headerData = updatedHeaderData;

    this.snackBar.open('Data has been saved successfully!','',{
      duration: 2000,horizontalPosition: 'center',verticalPosition: 'bottom',panelClass: ['snack-success']
    });
    return true;
  },error => {
    return false;
  })
}