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，子组件导入父组件...

Answer 2

您必须在父组件中注入服务（在提供程序条目中），设置您要使用的值，而不是在子组件中使用它。

@Component({
  selector: 'app',
  providers:[YourService]
  template: '<childCmp></childCmp>'
})
class AppComponent {
  constructor(private yourService: YourService) {
    this.yourService.setData(data);
  }
}

@Component({
  selector: 'childCmp',
  template: '{{yourService.getData()}}'
})
class ChildCmp {
  constructor(private yourService: YourService) {
    this.yourService.setData(value);
  }
}

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

2 个答案: