Angular 2 Header 组件 Title 根据状态动态变化 [英] Angular 2 Header component Title change dynamically according to the state

问题描述

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

1. 标题
2. 导航
3. 加载其他组件的位置(此部分可能嵌套了组件/子组件)

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

问题:为了实现这一点，我使用了 angular 中的组件交互技术.

• 应用程序重新加载后，它会显示当前和
  的默认值后面的状态.

• 在用户直接登陆到作为主体子组件的特定页面的场景中，它显示默认值当前和后退状态的值.

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

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

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

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

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

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

解决方案

虽然看起来很简单，但是使用子组件和 Input、Output 变量就可以实现.

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

@Component({选择器:'标题'，模板:`<div>{{title}}

`，})导出类 TitleComponent 实现 ngOnChanges{@Input() 标题:字符串="";@Output() titleChanged:EventEmitter=new EventEmitter();构造函数(){//服务调用到这里}ngOnChanges(){控制台日志(this.val)；this.titleChanged.emit(this.title);}}

父组件将作为

@Component({选择器:'我的应用'，模板:`<div><h2>你好{{name}}</h2><title (titleChanged)="changedTitle($event)" [title]="title"></title>

`，})出口类应用{名称:字符串；标题:字符串=一些标题"；价值:字符串；构造函数(){this.val="";}更改标题(va;){this.title="val"控制台日志(val)；}}

说明:

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

现场演示

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

I have a design using angular 2 where header component, navigation bar component and body component where all other components load. As the picture shows below

1. Header
2. Navigation
3. Where other components load (this section might have nested components/ children components)

So here basically, In the header component, I want to show the current state. And in the bottom of the current state, I want to show the previous state of the user.

Issues: To implement this I used the component interaction technique in angular.

• once the app is reloaded it shows the default value for current and
  the back states.

• In a scenario like where user straightly landing to the particular page which is a child component in the body also, it shows the default value for the current and the back state.

Since angular is following the component architecture I want a better way to implement this feature.

If I am straightly coming to a child component in section-3 in the picture my header component should get the title/current state according to the specific page in the header component.

My solution for this was in each component when ngOnInit I pass the current state value. Also I parse the previous state value. Therefore the header component shows it as it is since the service is written using the technique in this link - https://angular.io/docs/ts/latest/cookbook/component-communication.html

But there are some instances I get the data from the server and have to update the header current state. There I see that is not showing at all.

Need help with a good solution.

PS - Since this mechanism is in different kinda files and it's a bit complex I am helpless to update a code template

解决方案

Though it looks to be a simple one, but it can be achieved using child component and Input, Output variables.

Child Component for displaying the content from the service

@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 will be as

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

  }
}

Explanation:

1. When service call is made and the title value gets changed.
2. On change of the input property the ngOnChanges will be triggered automatically.
3. The titleChanged is Output() variable and emits a value when ever ngOnChanges is executed.
4. When the titleChanged is triggered, the associated method in the changedTitle() will be executed.

LIVE DEMO

Note: In order to show this is working I have used an text box and assigning it to the div element, you can modify this in the constructor of the routed component.

这篇关于Angular 2 Header 组件 Title 根据状态动态变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！