dependency-injection – 注入与子组件相同类型的父组件

前端之家收集整理的这篇文章主要介绍了dependency-injection – 注入与子组件相同类型的父组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在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

@H_301_22@ 这样它就有效了
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

原文链接:https://www.f2er.com/angularjs/143545.html

猜你在找的Angularjs相关文章