Angular（2.x）从另一个组件更改标题

Question

我有一个名为search.componet.ts的组件，其中包含几个标签：

{{1}}

在相关模板中，我有一个标题

{{1}}

如何从Tab-Components之一更改此标题？

Answer 1

我不知道你必须改变的标题在哪里，但你有很多不同的选择。最简单的可能是

<tab button (click)="title='whatever'">

这显然会在您单击相应选项卡时更改该标题。  使用服务可能是另一种解决方案，将其注入需要了解此标题的所有组件中，但在您的情况下可能有点矫枉过正。无论如何都是这样的。

  @Injectable()
  export class TitleService {
   title: string = 'whatever';
  }

这样做的好处还在于，如果你需要注册一些额外的行为，你可以使用一个observable来处理标题的更改并订阅它的其他行为的更改。

我能做的最后一件事就是每个组件从父级接收@Input（）来决定标题。

我希望这足以给你一些想法。

Answer 2

您必须创建一个SearchPage标题属性，然后在<h3>{{title}}</h3>的页面上显示它。

Tab-Components应在您想要

时修改此属性

Answer 3

谢谢大家，我找到了解决方案。我使用IONIC 2，在我的Class（SerachPage）中定义了一个函数：

title: string = 'Default Title';

...

setTitle(tabtitle){
    this.title = tabtitle;
}

在我的标签中，我将此功能称为：

<ion-tab [root]="tabRoot1"  (ionSelect)="setTitle('My new Title')"></ion-tab>