dependency-injection - 注入(inject)与子组件相同类型的父组件

Question

在 Angular 2 中，子组件可以通过构造函数参数注入(inject)其父组件。示例:

@Component({...})
export class ParentComponent {
  ...
}

@Component({...})
export class ChildComponent {
  constructor(private parent: ParentComponent) { }
  ...
}

只要父项和子项属于不同类型，这种方法就很好用。

但是，另一个典型的用例是树结构，其中每个树节点显示为单独的组件。如果每个树节点组件都应该访问其父节点，我们应该怎么做？我试过这个:

@Component({...})
export class TreeNodeComponent {
  constructor(private parent: TreeNodeComponent) { }
...
}

但这会失败并出现以下运行时异常:

EXCEPTION: Cannot instantiate cyclic dependency!

我猜原因是 Angular 2 注入(inject)了组件本身而不是它的父组件。

即使它们属于同一类型，我如何告诉 Angular 注入(inject)组件的父组件？

笨蛋 https://plnkr.co/edit/ddvupV?p=preview

Answer 1

它是这样工作的

constructor(@SkipSelf() @Host() @Optional() parent: TreeNodeComponent) {}

Plunker

• @SkipSelf() 是为了不让自己注入(inject)，如果请求 TreeNodeComponent 则适用
• @Host() 不要向上看宿主元素
• @Optional() ??根节点没有父 TreeNodeComponent

另见 http://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html