如何在不刷新整个页面的情况下更新组件-Angular

Question

我的页面结构是：

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

如何在app-header不刷新整个页面的情况下更新/刷新组件？

一旦用户成功登录，我想在标题中隐藏“登录”链接。标题在所有组件/路由中都是通用的。

Answer 1

许多解决方案之一是创建一个@Injectable()类，其中包含要在标题中显示的数据。其他组件也可以访问此类并更改此数据，从而有效地更改标题。另一个选择是设置@Input()变量和@Output()EventEmitters，可用于更改标头数据。根据需要编辑示例：@Injectable()export class HeaderService {&nbsp; &nbsp; private _data;&nbsp; &nbsp; set data(value) {&nbsp; &nbsp; &nbsp; &nbsp; this._data = value;&nbsp; &nbsp; }&nbsp; &nbsp; get data() {&nbsp; &nbsp; &nbsp; &nbsp; return this._data;&nbsp; &nbsp; }}在其他组件中：constructor(private headerService: HeaderService) {}// Somewherethis.headerService.data = 'abc';在标题组件中：let headerData;constructor(private headerService: HeaderService) {&nbsp; &nbsp; this.headerData = this.headerService.data;}我实际上还没有尝试过。如果获取/设置无效，则可以将其更改为使用Subject（）;。// Simple Subject() example:let subject = new Subject();this.subject.subscribe(response => {&nbsp; console.log(response); // Logs 'hello'});this.subject.next('hello');