У меня есть родительский компонент, у которого есть куча вкладок со ссылками. На каждой вкладке есть ссылка, по которой можно перейти к дочернему компоненту. На родительской вкладке есть данные заголовка, такие как имя клиента, 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'
}
]
},