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

时间:2016-11-24 16:17:52

标签: angular angular2-routing angular2-services angular2-components ngcomponentrouter

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

  1. 标题
  2. 导航
  3. 其他组件加载的位置(此部分可能已嵌套 组件/儿童组件)
  4. Angular components

    所以基本上,在标题组件中,我想显示当前状态。在当前状态的底部,我想显示用户的以前的状态

    问题: 为了实现这一点,我在angular。中使用了组件交互技术。

    • 重新加载应用后,它会显示当前和
      的默认值 后面的状态。

    • 在用户直接登陆到正文中的子组件的特定页面的场景中,它显示默认值 当前和后退状态的值。

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

    如果我直接进入图片第3部分中的子组件,我的标题组件应根据标题组件中的特定页面获得标题/当前状态。

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

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

    需要有关良好解决方案的帮助。

    PS - 由于这种机制有不同的文件,而且有点复杂,我无法更新代码模板

1 个答案:

答案 0 :(得分:3)

虽然它看起来很简单,但可以使用子组件和输入,输出变量来实现。

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

@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. titleChanged 是Output()变量,并在执行ngOnChanges时发出一个值。
  4. 触发titleChanged时,将执行 changedTitle()中的关联方法。
  5. <强> LIVE DEMO

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