I've encountered an issue where I can't pass parent data from the ngOnInit route params to my child component, user-seminar. After some research and searching on Google, I found a solution involving services.
To address this problem, I modified my app navigation to use router-outlet and set up the 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)
},
In my parent module user-profile routing, I defined the following routes:
const routes: Routes = [
{ path: '', component: UserProfileComponent,
children: [
{
path: 'information',
component: UserInformationComponent
},
{
path: 'seminar',
component: UserSeminarComponent
},
]
},
];
I intend to display user-seminar data whenever this link is clicked:
<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>
Despite trying various methods, my child component subscription doesn't work because I'm unable to retrieve employeeNumber data from the parent.
private getUserSeminar(): void {
console.log(this.employeeNumber);
this.apiService.getSeminar('users/seminar/', this.employeeNumber)
.subscribe(
data => {
this.seminar = data;
});
}
I'm struggling with passing the parent ngOnInit routes params data to the child component, user-seminar.
ngOnInit() {
this.routes.paramMap.subscribe(paramMap => {
this.employeeNumber = Number(paramMap.get('employee_number'));
});
}
I attempted to use a service method that I came across in a Stack Overflow post. However, it didn't cover how to incorporate API usage.
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);
}
My query pertains to obtaining API data within services and then sharing it between my parent and child components. Would using this.http.get inside my service address this issue?