如何在不刷新整个页面的情况下更新组件-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 {

    private _data;

    set data(value) {

        this._data = value;

    }

    get data() {

        return this._data;

    }

}

在其他组件中：

constructor(private headerService: HeaderService) {}

// Somewhere

this.headerService.data = 'abc';

在标题组件中：

let headerData;

constructor(private headerService: HeaderService) {

    this.headerData = this.headerService.data;

}

我实际上还没有尝试过。如果获取/设置无效，则可以将其更改为使用Subject（）;。

// Simple Subject() example:

let subject = new Subject();

this.subject.subscribe(response => {

  console.log(response); // Logs 'hello'

});

this.subject.next('hello');