angular - 我如何使用依赖注入(inject)访问angular2中父组件的值？

Question

我有两个组件，一个是父组件，一个是子组件，我想使用 DI 从子组件访问父组件中的变量，但我没有得到。我做了一个 plunker 演示 http://plnkr.co/edit/fcfweLJAmadKVWKXF25l?p=preview ...我试图从子组件访问变量的值并正确获取但不是从父组件到子组件。这就是我在子组件中访问变量的方式

@Component({
  selector: 'child',
  providers:[AppComponent]
  template: '<h1>My second Angular 2 App</h1>'
})
class NameComponent {
  name:string;
  constructor(AppComponent: AppComponent) {
    this.name = AppComponent.getName();
    console.log(this.name);
  }
}

我想知道是否可以使用 DI 从父级访问变量？有些人请告诉我如何获得这些值(value)

Answer 1

是的，这是可能的，但您需要如下所述利用 forwardRef，因为您不能使用提升:

@Inject(forwardRef(() => AppComponent)) app:AppComponent

这是完整的示例:

@Component({
  selector: 'child',
  providers:[AppComponent]
  template: '<h1>My second Angular 2 App</h1>'
})
class NameComponent {
  name:string;
  constructor(@Inject(forwardRef(() => AppComponent)) appComponent: AppComponent) {
    this.name = appComponent.getName();
    console.log(this.name);
  }
}

@Component({
})
class AppComponent {
}

这是更新的 plunkr:http://plnkr.co/edit/brmQ01wFWrWvXmxpJpCc?p=preview .

Christoph Burgdorf 撰写的这篇文章也可以帮助您:

• http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html

如果类被定义到单独的模块/文件中，我们还应该注意循环依赖:父组件导入子组件，子组件导入父组件...