Question

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

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

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

成功登录后，我正在调用router.navigate(['/home])。主页和登录都检查用户是否在各自的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中调用组件刷新

1 个答案: