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

发布时间：2020-12-14 04:48:07 所属栏目：百科来源：网络整理

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

我有两个组件,一个父母和一个孩子,我想要从孩子使用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从父级访问变量？请告诉我如何获取价值观

解决方法

是的,这是可能的,但你需要利用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,子组件导入父组件…

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!