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

Question

我有一个使用 angular 2 的设计，其中 header 组件、导航栏组件和 body 组件加载所有其他组件。如下图所示

Header
导航
加载其他组件的位置（此部分可能已嵌套组件/ children 组件)

所以基本上，在 header 组件中，我想显示 当前状态 。在当前状态的底部，我想显示用户的先前状态。

问题：为了实现这一点，我使用了 angular.

中的组件交互技术

应用程序重新加载后，它会显示当前和
的默认值后面的州。
在用户直接登陆特定页面的情况下，该页面也是 body 中的 child 组件，它显示默认值当前和后退状态的值。

由于 angular 遵循组件架构，我想要一种更好的方法来实现此功能。

如果我直接进入图片中第 3 部分的 child 组件，我的 header 组件应该根据 [=] 中的特定页面获得 title/current 状态66=]组件。

我的解决方案是在每个组件中，当 ngOnInit 传递当前状态值时。我还解析了以前的状态值。因此 header 组件按原样显示它，因为服务是使用此 link - https://angular.io/docs/ts/latest/cookbook/component-communication.html

中的技术编写的

但有些情况下我从服务器获取数据并且必须更新 header 当前状态。在那里我看到根本没有显示。

需要一个好的解决方案的帮助。

PS - 由于这个机制在不同的文件中并且有点复杂我无奈更新代码模板

Answer 1

虽然看起来很简单，但是可以使用child组件和输入、输出变量来实现。

Child 用于显示服务内容的组件

@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);
  } 

}

Parent 组件将是

@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);

  }
}

解释：

进行服务调用且标题值发生更改时。
输入更改时属性将自动触发 ngOnChanges。
titleChanged 是 Output() 变量并在执行 ngOnChanges 时发出一个值。
当titleChanged被触发时，changedTitle()中的关联方法将被执行。

LIVE DEMO

注意：为了显示这是有效的，我使用了一个文本框并将其分配给 div 元素，您可以在路由组件的构造函数中修改它。

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

Angular 2 Header component Title change dynamically according to the state

angular

angular2-routing

angular2-services

angular2-components

ngcomponentrouter