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）。< / p>

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

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

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

Angular 4 - 检测到循环依赖

3 个答案: