Question

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

Answer 1

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

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

在bootstrap期间注册

bootstrap(App,[AppService]);

并将其注入Parent和Child组件中。家长致电set并致电get

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

Answer 2

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

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

class Parent {
  public value = 123;
}

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

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

Answer 3

我会看到几种方法：

在子组件中创建<?php $key = $_GET['key'] ?>以提供要显示的值。有关详细信息，请参阅此链接：`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

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

3 个答案: