6

我有一个使用 Angular 2 的设计，其中标题组件、导航栏组件和所有其他组件加载的正文组件。如下图所示

  1. 标题
  2. 导航
  3. 加载其他组件的位置（本节可能有嵌套组件/子组件）

角组件

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

问题：为了实现这一点，我在 Angular 中使用了组件交互技术。


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

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

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

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

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

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

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

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

4

1 回答 1

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()中的关联方法将被执行。

现场演示

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

于 2017-03-11T13:01:57.530 回答