注入与子组件相同类型的父组件

Question

在Angular 2中,子组件可以通过构造函数参数获取其父组件.例:

@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注入组件本身而不是其父组件.

如何将angular注入组件的父组件,即使它们属于同一类型？

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

Answer 1

这样它就有效了

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

Plunker

• @SkipSelf()是不要自己注射,如果TreeNodeComponent被要求将适用
• @Host() 不要比主机元素更进一步
• @Optional()?? TreeNodeComponent根节点没有父节点

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