如何在路由器插座中获取 api 数据 - Angular

Question

我的问题是我无法将父数据ngOnInit route params传递给我的子组件用户研讨会。 所以我尝试谷歌搜索并通过服务找到解决方案。

我已将我的应用程序导航更改为路由器插座，并且我有主要的应用程序路由。

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

这是我的父模块用户配置文件路由

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 路由参数，我不能将此数据传递给用户研讨会子

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>

如果您在渲染组件之前需要预加载数据 - 您可以在保护中执行此操作并允许用户仅在加载数据以进行渲染后导航