当前位置 : 主页 > 手机开发 > 其它 >

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

来源:互联网 收集:自由互联 发布时间:2021-06-22
我有两个组件,一个父母和一个孩子,我想要从孩子使用DI访问父组件中的变量,但我没有得到那个.我已经做了一个plunker演示 http://plnkr.co/edit/fcfweLJAmadKVWKXF25l?p=preview …我试图访问变量的值
我有两个组件,一个父母和一个孩子,我想要从孩子使用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,子组件导入父组件…

网友评论