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

发布时间：2020-12-17 07:55:13 所属栏目：安全来源：网络整理

导读：在Angular 2中,子组件可以通过构造函数参数获取其父组件.例： @Component({...})export class ParentComponent { ...}@Component({...})export class ChildComponent { constructor(private parent: ParentComponent) { } ...} 父母和孩子的类型不同,这很好

在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

这样它就有效了

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!