如何在router outlet中获取api数据——Angular

Question

我的问题是我不能传递父数据ngOnInit route params到我的子组件user-seminar。所以我尝试了谷歌搜索，并通过服务找到了解决方案。

我已经把我的应用导航改成了router-outlet，并且设置了main app-routing。

{
path: 'users/:employee_number',
canActivate: [AuthGuard],
data: {permission: 'view_user'},
loadChildren: () => import('./features/user-profile/user-profile.module').then(m => m.UserProfileModule)
},

这是我的父模块user-profile routing

const routes: Routes = [
{ path: '', component: UserProfileComponent, 
children: [
{
path: 'information',
component: UserInformationComponent
},
{
path: 'seminar',
component: UserSeminarComponent
},
]
},
];

这里我想显示用户研讨会数据每当这个链接被点击

<a [routerLink]="['seminar']" data-toggle="collapse" aria-expanded="false"
class="nav-link">
<i class="nav-icon fas fa-user"></i>
<p class="nav-text">
Seminar/Workshops Attended
</p>
</a>

这是我的子组件订阅不起作用，因为我不能从父组件获取我的employeeNumber数据。

private getUserSeminar(): void {
console.log(this.employeeNumber);
this.apiService.getSeminar('users/seminar/', this.employeeNumber)
.subscribe(
data => {
this.seminar = data;
});
}

这是我的父ngOnInit路由参数，我不能把这个数据传递给user-seminar子

ngOnInit() {
this.routes.paramMap.subscribe(paramMap => {
this.employeeNumber = Number(paramMap.get('employee_number'));
});

}

尝试使用服务方法，我发现在stackoverflow的一个帖子。但是没有提到使用api。

seminarSet:any;
seminarSets: Subject<any> = new Subject<any>();
constructor(private http: HttpClient) {
this.seminarSets.subscribe((value) => {
this.seminarSet = value;
});
}
seminarData(seminarSet: any) {
this.seminarSets.next(seminarSet);
}

我的问题是如何在服务中获得api数据，然后将其共享给我的父组件和子组件。我使用this.http.get在我服务吗?

Answer 1

seminarSets$ = new BehaviorSubject<any>();
this.seminarSet.next(SOME_VALUE);

在* .component.ts:

this.someSharedService.seminarSets$.subscribe(seminarSets => {/**/})

在* component.html:

<div *ngIf="(someSharedService.serseminarSets$ | async) as seminarSets">
<!-- here u can use seminarSets variable -->
</div>

如果你需要在渲染组件之前预加载数据-你可以在guard中这样做，并允许用户仅在加载数据后进行导航