我的页面结构是:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
如何在不刷新整个页面的情况下更新/刷新 app-header
组件?
一旦用户成功登录,我想在标题中隐藏一个“登录”链接。标题在所有组件/路由中都是通用的。
最佳答案
您可以使用 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
在你的<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
条件例如:
<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);
}
关于javascript - 如何在不刷新整个页面的情况下更新组件 - Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46047854/