在 Angular 中调用组件刷新 2

Question

我正在尝试实现一个导航栏，它根据用户是否登录显示不同的链接。

我正在使用提供 tokenNotExpired() 功能的 angular2-jwt 库。

我有 2 条路线，/home 和 /login。我有一个位于 <router-outlet> 之外的导航栏组件，这意味着它只初始化一次，而不是每次路线更改时都初始化。

登录成功后，我正在调用router.navigate(['/home])。 home 和 login 都检查用户是否在各自的 ngOnInit() 函数中登录。因此，主页组件能够检测到登录用户。

但是，我无法更新导航栏，因为它没有收到登录通知。

任何人都可以告诉我实现此更改检测的正确方法吗？

谢谢。

Answer 1

通过服务公开登录状态

@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函数

在 Angular 中调用组件刷新 2

Invoke component refresh in Angular 2

observable

auth0

angular2-routing

angular