Я предполагаю, что так устроены ваши компоненты:
// In app.component.html
<app-navbar></app-navbar>
<router-outlet></router-outlet> // For rest of the pages.
Здесь есть 2 способа (я не буду говорить о включении ngModel), с помощью которых мы можем передавать данные на панель навигации для обновления статуса./ данные навигационной панели.
1.Использование декораторов ввода / вывода.
// Your navbar.component.ts
// I'm assuming you have set up model for User. If no, then change the type to **any**.
@Input() currentUser: IUser;
// Your navbar.component.html
<p *ngIf="currentUser"> {{currentUser | json}} </p> // Render this if currentUser exists. By default, it is undefined.
Теперь в вашем компоненте приложения :
//In your app.component.ts
User: any | IUser;
public authenticateUser() {
this.someServiceToAuthenticateUser.subscribe(
res => this.User = res,
error => console.error(error)
);
}
// In your app.component.html
<app-navbar [currentUser]="User"></app-navbar>
<router-outlet></router-outlet>
Использование общего сервиса. Вы можете создать общий сервис, в котором будет находиться аутентифицированный пользователь.Из вашего
компонента приложения вы можете указать пользователю успешность аутентификации ответа, а из других компонентов вы можете получить аутентифицированного пользователя.
export class UserService {
private currentUser: IUser | any;
setCurrentUser(userToSet: any) {
this.currentUser = userToSet;
}
getCurrentUser() {
return this.currentUser;
}
Теперь в вашем компоненте приложения , если запрос на проверку подлинности использования выполнен успешно, тогда установите currentUser of UserService:
//In your app.component.ts
User: any | IUser;
public authenticateUser() {
this.someServiceToAuthenticateUser.subscribe(
res => this.UserService.setCurrentUser(res),
error => console.error(error)
);
}
Теперь, в вашем компоненте панели навигации получите текущего пользователя из UserService.
// In navbar.component.ts
currentUser: any;
constructor(private userServicce: UserService) {
getuserFromservice();
}
public getuserFromservice() {
setInterval(() => {
curretnUser = this.userService.getCurrentUser()
}, 3000);
Важно: При таком подходе обратите внимание на компонент панели навигации, у меня естьустановить текущего пользователя в setInterval.Это связано с тем, что ваш getuserFromservice () будет запущен только один раз (при его создании / визуализации в первый раз), и в это время userService не будет иметь currentUser.Так что navbar никогда не получит currentUser.Если вы хотите заменить подход setInterval (я настоятельно рекомендую заменить его), используйте Subjects / BehaviourSubject / ReplaySubject .Я не включил их здесь, потому что Rxjs сама по себе огромная тема, и в том числе ее было бы слишком сложно понять.