Запустить обновление компонента в Angular 2

Question

Я пытаюсь внедрить навигационную панель, которая показывает разные ссылки на основе того, вошел ли пользователь в систему.

Я использую библиотеку angular2-jwt, которая предоставляет функцию tokenNotExpired().

У меня есть 2 маршрута, /home и /login. У меня есть компонент navbar, который находится за пределами <router-outlet>, что означает, что он инициализируется только один раз, а не каждый раз, когда маршрут изменяется.

После успешного входа в систему я вызываю router.navigate(['/home]). У дома и входа в систему есть проверки, если пользователь выполнил вход в свои соответствующие функции ngOnInit(). Поэтому домашний компонент способен обнаруживать зарегистрированного пользователя.

Однако я не могу обновить навигатор, так как он не информирован о логине.

Может ли кто-нибудь сказать мне правильный способ реализовать это обнаружение изменений?

Спасибо.

Answer 1

Expose состояния входа через службу

@Injectable() 
export class UserAuthService{ 
    userLoggedIn : bool = false; 

    //call this function when login status changes 
    changeLoginStatus(status: bool){ 
     this.userLoggedIn = status; 
    } 
} 

сделать ваш одноточечно служба

@NgModule({ 
    declarations: [ 
    NavbarComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing, 
    ], 
    providers: [UserAuthService], // <-- Provide your service here 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

пользователя вашей службы в панели навигации

import { UserAuthService } from 'path/to/service'; 

export class NavbarComponent { 
    constructor(private authService: UserAuthService) { } // <-- inject service 

    ngOnInit() { } 
} 

так что вы можете изменить шаблон с помощью сервиса.

<div [hidden]="!authService.userLoggedIn"><a routerLink="/login">login</a></div> 

вызов changeLoginStatus функции сервиса при изменении статуса Логин.