Question

我有一个共享组件 - headerbarComponent - 带有属性 - headerTitle。我用它来显示哪个页面是最新的。我需要在加载的模板上更改此标题。在加载新组件时，它调用方法

headerbarComponent.setTitle( newTile ) { this.headerTitle = newTitle }

它在JS控制台中显示标题已更改但标题根本没有变化。

<div>{{headerTitle}}</div>

如何更改此标题？

Answer 1

您可以创建.send()的服务，该服务将“监视”任何更改：

new Subject()

您的共享组件需要订阅并更新您的标题：

@Injectable()
export class HeaderService {

  private headerTitleSubject: Subject<string> = new Subject<string>();

  constructor() { }

  setTitle(title: string) {
    this.headerTitleSubject.next(title);
  }

  onSetTitle() {
    return this.headerTitleSubject;
  }
}

最简单的部分是从您想要的任何组件更新此标题：

this.headerService.onSetTitle().subscribe(
    newTitle => {
        this.title = newTitle;
    }
);

以下是一个工作示例：https://plnkr.co/edit/f8vmbd30K6tzBZyPFJLS?p=preview

更改共享组件中的某些属性 - Angular 2

1 个答案: