Angular 2 Header组件标题根据状态动态变化

Question

我有一个使用angular 2的设计，其中所有其他组件都加载其中的标题组件，导航栏组件和主体组件。 如上图所示下面

1. 头
2. 导航
3. 当其他部件的负载（这部分可能有嵌套 组件/子组件）

所以这里基本上在标题组件中，我想显示当前状态。并且在当前状态的底部，我想显示用户的先前状态的。

问题： 为了实现这个，我使用了角度中的组件交互技术。

• 一旦应用程序重新加载它显示的默认值电流和
  后的状态。

• 在像用户直接登陆特定页面那样的场景中，该页面也是主体中的子组件，它显示当前和后面状态的默认值 值。

由于angular是遵循组件体系结构，所以我想要一个更好的方法来实现此功能。

如果我直接来到图片中第3节中的子组件，我的头组件应该根据标头组件中的特定页面获取标题/当前状态。

我的解决方案是在每个组件中，当ngOnInit我传递当前状态值。我也解析了以前的状态值。因此，标题组件显示它，因为服务是使用此链接中的技术编写的 - https://angular.io/docs/ts/latest/cookbook/component-communication.html

但是有一些实例从服务器获取数据并必须更新标头当前状态。在那里，我看到那根本没有出现。

需要帮助以获得良好的解决方案。

PS - 因为这个机制是不同的还挺文件，这是一个有点复杂，我也很无奈更新代码模板

Answer 1

虽然它看起来是一个简单的，但它可以使用子组件和输入来实现，输出变量。

子组件，用于显示从服务内容

@Component({ 
    selector: 'title', 
    template: ` 
    <div> {{title}}</div> 
    `, 
}) 
export class TitleComponent implements ngOnChanges{ 

    @Input() title:string=""; 
    @Output() titleChanged:EventEmitter<string>=new EventEmitter<string>(); 
    constructor(){ 
    //service call goes here 
    } 
    ngOnChanges(){ 
    console.log(this.val); 
    this.titleChanged.emit(this.title); 
    } 

} 

父组件将作为

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <title (titleChanged)="changedTitle($event)" [title]="title"></title> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    title:string="some title"; 
    val:string; 
    constructor() { 
    this.val=""; 

    } 

    changedTitle(va;){ 
    this.title="val" 
    console.log(val); 

    } 
} 

说明：

1. 当服务呼叫提出，而标题值变改变。
2. 在更改输入属性时，ngOnChanges将自动触发。
3. The titleChanged是Output（）变量，并在执行ngOnChanges时发出一个值。
4. 当titleChanged被触发时，将会执行changedTitle（）中的关联方法。

LIVE DEMO

注：为了显示这个工作我已经使用了文本框，并将其分配给div元素，你可以在路由组件的构造进行修改。