如何在子组件中显示父组件属性 [angular2]答案

【问题标题】：How to show parent component properties in a child component [angular2]如何在子组件中显示父组件属性 [angular2]
【发布时间】：2016-02-20 16:41:54
【问题描述】：

我希望给定组件能够引用其父组件。实际上，我有一些应用程序状态（用户选择的选项），我希望能够从应用程序中的任何位置使用它们。这是最好的模式：a）引用我组件的父组件上的属性或b）以某种方式使应用程序状态对所有组件全局可用。这看起来如何？

【问题讨论】：

标签： angular

【解决方案1】：

如果需要在应用程序之间共享某些内容，最好将其封装到服务中并在引导过程中进行注册。

export class AppService {
  private _state:any;
  set(state){
   this.state=state;
  }
  get() {
   return this._state
  }
}

在引导过程中注册

bootstrap(App,[AppService]);

并将其注入到父组件和子组件中。家长打电话set，孩子打电话get

如果状态只是组件的本地状态，那么您可以使用@Sasxa 指出的简单属性绑定输入。

【讨论】：

我最终使用了这个策略，效果很好。

【解决方案2】：

您可以通过属性绑定/输入属性将值从父级传递给子级，如下所示：

<parent>
  <child [state]="value">

class Parent {
  public value = 123;
}

class Child {
  @Input() state;
  ngOnInit() {
    console.log(state);
  }
}

对于 b)，我强烈推荐 @ngrx/store。

【讨论】：

【解决方案3】：

我会看到几种方法来做到这一点：

在子组件中创建@Input 以提供要显示的值。有关详细信息，请参阅此链接：`Error: Output is not defined` when passing value outside a directive to parent directive
将父组件实例注入到子组件中。这样子组件将可以访问父属性。有关详细信息，请参阅此答案：Angular2 Exception: No provider for Service
使用具有专用属性的共享服务来进行父子组件的通信。有关详细信息，请参阅此链接：Delegation: EventEmitter or Observable in Angular2

【讨论】：