如何将父组件注入子组件？

Question

我正在尝试将父组件注入子组件。我认为这很简单——只需在孩子的constructor() 中指定/注入父组件：

constructor(private _parent:AppComponent) {}   // child component constructor

我收到以下错误：

异常：无法解析 ChildComponent(?) 的所有参数。确保它们都有有效的类型或注释。

我错过了什么？

子组件：

import {Component} from 'angular2/core';
import {AppComponent} from './app.component';

@Component({
  selector: 'child',
  template: `<p>child</p>`
})
export class ChildComponent {
  constructor(private _parent:AppComponent) {}
}

应用组件：

import {Component} from 'angular2/core';
import {ChildComponent} from './child.component';

@Component({
  selector: 'my-app',
  template: `{{title}} <child></child>
  `,
  directives: [ChildComponent]
})
export class AppComponent {
  title = "Angular 2 - inject parent";
  constructor() { console.clear(); }
}

Plunker

Answer 1

请参阅@EricMartinez 的comment 以获得答案。当 A 导入 B 和 B 导入 A 时，问题似乎是循环引用。

这是一个plunker，它使用两个文件而不是Eric's plunker 中的一个文件。

与我原来的 plunker 的唯一变化是 ChildComponent：

import {Component, Inject, forwardRef} from 'angular2/core';
// ....
constructor(@Inject(forwardRef(() => AppComponent)) private _parent:AppComponent)

我不确定这是否消除了循环引用，因为 A 和 B 仍在相互导入，但它似乎有效。

另见https://github.com/angular/angular/issues/3216，其中 Miško 指出：

这个 [使用 forwardRef() 的非用户友好声明] 是 JS 的限制以及函数声明如何被提升。每当您有循环依赖时，您都需要forwardRef :-( 我只是看不到它周围的地方。

我认为您不应该处于父母需要了解孩子而孩子需要了解父母的情况。 @Query 应该处理大部分用例。

很抱歉，虽然我同意这在极少数情况下会很痛苦，但我看不出有什么出路，因此这个问题不可行，将关闭。

嗯...我尝试注入父母的原因是因为我看到了孩子与父母交流的两种方式：

1. 子级定义输出属性并发出事件，父级订阅这些事件
2. 子级注入父级（例如，Pane 可能会注入 Tabs），然后可以调用父级上的方法

我试图确定何时使用每种方法。 Miško 听起来像 2. 应该很少见。

更新：我在考虑这个问题... 1. 更好，因为孩子和父母之间的耦合更少。 1. 孩子不需要知道（也可能不应该知道）父母的公共 API/接口。
在相反的方向（例如，父级使用@ViewChild（@Query 现在已弃用）来获取对子级的引用，然后在子级上调用方法），耦合很好，因为父级正在使用子组件，所以它需要知道子组件的公共API/接口：即输入输出属性和公共方法。

Answer 2

您可以像这样简单地使用@Host 装饰器：

import {Component, Host} from 'angular2/core';
// ....
constructor(@Host() private app: AppComponent)