我的页面结构是:
<app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>
如何在app-header不刷新整个页面的情况下更新/刷新组件?
app-header
一旦用户成功登录,我想在标题中隐藏“登录”链接。标题在所有组件/路由中都是通用的。
您可以使用 BehaviorSubject 来在整个应用程序的不同组件之间进行通信。您可以定义一个数据共享服务,其中包含 BehaviorSubject 您可以订阅和发出更改的服务。
BehaviorSubject
定义数据共享服务
import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable() export class DataSharingService { public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); }
DataSharingService 在您的 AppModule 提供商条目中添加。
DataSharingService
AppModule
接下来,将导入到DataSharingService您<app-header>和您在其中执行登录操作的组件中。在<app- header>订阅isUserLoggedIn主题更改中:
<app-header>
<app- header>
isUserLoggedIn
import { DataSharingService } from './data-sharing.service'; export class AppHeaderComponent { // Define a variable to use for showing/hiding the Login button isUserLoggedIn: boolean; constructor(private dataSharingService: DataSharingService) { // Subscribe here, this will automatically update // "isUserLoggedIn" whenever a change to the subject is made. this.dataSharingService.isUserLoggedIn.subscribe( value => { this.isUserLoggedIn = value; }); } }
在您的<app-header>html模板中,您需要添加*ngIf条件,例如:
*ngIf
<button *ngIf="!isUserLoggedIn">Login</button> <button *ngIf="isUserLoggedIn">Sign Out</button>
最后,您只需要在用户登录后发出事件,例如:
someMethodThatPerformsUserLogin() { // Some code // ..... // After the user has logged in, emit the behavior subject changes. this.dataSharingService.isUserLoggedIn.next(true); }