如何使用依赖注入从angular2中的父组件访问值？

Question

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

@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从父级访问变量？请告诉我如何获取价值观

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

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