Angular 4 - 检测到循环依赖

Question

从存在于子组件中的父组件打开模型。子功能完成后，必须从子组件调用父组件 METHOD。

我可以从子组件调用该方法到父组件，但其通过警告检测到循环依赖..

Parent :
parent.html
<child></child>

Parent.ts 
import {c_Comp} from 'child.comp'
@Component({
selector: "parent",
 templateUrl: "parent.html"   
})
export class parent{
 @ViewChild{c_Comp} child : c_Comp;
 constructor(){}
 method(){
   this.child.open();       
 }    
 loadlist(){ } // Have to call from child component.
}  

Child:
import { p_Comp } from 'parent.comp';

@Component({
selector: "child",
  templateUrl: "child.html"   
})
export class child{
  constructor(@Inject(forwardRef(() => parent)) private 
  _parent:parent ) {}
  open() {
    this.notifyModel.show();
  }    
  notifyConfirm() {
   this._parent.loadlist();
  }
}  

module.ts   

import { parent } from 'parent.comp';
import { child } from 'child.comp';
@NgModule({
     declarations: [parent, child],
     imports: []
})  
export class AppModule { }

Answer 1

您应该避免这种引用，如果您想与孩子交谈，请使用@ViewChild，但如果您想与孩子的父母做某事，请使用事件 (@Output)。

这里有一个我为你做的例子。

https://stackblitz.com/edit/angular-rltr2g

父组件

@Component({
  selector: 'parent',
  template: `
    <h1>Parent component</h1>
    <child (onNotify)="runOnChildNotify($event)"></child>
    <p>Times notified: {{count}}</p>
    <button (click)="openChild()">Open child</button>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class ParentComponent  {

  @ViewChild(ChildComponent) child : ChildComponent = null;

  count: number = 0;

  constructor() {}

  openChild(): void {
    this.child.open();
  }

  loadList(): void {
    this.count++;
  }

  runOnChildNotify(event: any) {    
    console.log(event.message); // you will see 'hello form child component' here.
    this.loadList();
  }

}

子组件

@Component({
  selector: 'child',
  template: `[Child component - Here]`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ChildComponent  {

  @Output() onNotify: EventEmitter<any> = new EventEmitter();

  constructor() {}

  open(): void {
    this.onNotify.emit({message: 'hello from child component'});
  }

}

Answer 2

您将子组件导入到父组件，将父组件导入到子组件，您不需要导入这些组件。

只要它们位于同一个模块中，比如app.module.ts，并且您将子组件的选择器放在父组件的模板中，您的代码就可以正常工作。

另外，对于@ViewChild，您无需输入孩子，而是使用ElementRef，甚至不使用它。

Answer 3

正确构建应用程序可以避免循环依赖。在您的情况下，这可能是原因，一个组件/服务的导入依赖于另一个组件/服务，而另一个组件/服务又依赖于第一个组件/服务或或类似的模式。