依赖注入循环参考

时间:2017-10-21 16:58:47

标签: angular circular-dependency

由于我已将Angular CLI升级到1.3以上,因此我获得了循环依赖性错误。

以下是小方案。

我有一个父组件,其中包含以下模板:

<ng-content select="child"></ng-content>

这是父组件:

import {Component, ContentChildren, OnInit, QueryList, ViewChildren} from '@angular/core';
import {ChildComponent} from '../child/child.component';

@Component({
  selector: 'parent',
  templateUrl: 'parent.component.html',
  styleUrls: ['parent.component.scss']
})
export class ParentComponent implements OnInit {
  @ContentChildren(ChildComponent) children: QueryList<ChildComponent>;

  constructor() {
  }

  ngOnInit() {
  }

}

我需要从Child访问Parent-Component。

import {Component, forwardRef, Inject, OnInit} from '@angular/core';
import {ParentComponent} from '../parent/parent.component';

@Component({
  selector: 'child',
  templateUrl: 'child.component.html',
  styleUrls: ['child.component.scss']
})
export class ChildComponent implements OnInit {
  constructor(@Inject(forwardRef(() => ParentComponent)) private parent: ParentComponent) {
  }

  ngOnInit() {
  }

}

但不幸的是我无法让它发挥作用。

我总是在浏览器中收到以下错误: 未定义ParentComponent。

这里有详细的错误。

main.bundle.js:405 Uncaught ReferenceError: ParentComponent is not defined
    at Object.a (main.bundle.js:405)
    at Object.../../../../../src/app/features/child/child.component.ts (child.component.ts:10)
    at __webpack_require__ (bootstrap b2ea9a8fb38ffd64376a:54)
    at Object.../../../../../src/app/features/parent/parent.component.ts (main.bundle.js:407)
    at __webpack_require__ (bootstrap b2ea9a8fb38ffd64376a:54)
    at Object.../../../../../src/app/app.module.ts (app.component.ts:11)
    at __webpack_require__ (bootstrap b2ea9a8fb38ffd64376a:54)
    at Object.../../../../../src/main.ts (environment.ts:9)
    at __webpack_require__ (bootstrap b2ea9a8fb38ffd64376a:54)
    at Object.0 (main.bundle.js:6208)

您对此方案有任何解决方案吗?真正令我烦恼的是它在旧版本中有效。

修改 我的场景在这里解释: 假设父级是“ControlValue”组件。例如,自定义选择框。

子项是“option”标记的自定义实现。 当我单击选项(通过hostlistener)时,我想更新自定义选择框的值。所以我想引用一个父母。能够致电:

this.parent.writeValue(this._value);

0 个答案:

没有答案