上一篇: 如何将快速添加到角度启动器？下一篇:如何从Angular 2中的指令追加动态...

Angular 4 – 从子组件调用父方法不起作用

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Angular 4 – 从子组件调用父方法不起作用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我的所有事件发射器都正常工作,除了一个.

child.ts：

@Component({
    ... 
    outputs: ['fileUploaded']
    })

export class childComponent implements OnInit {
  ...
  fileUploaded = new EventEmitter<Boolean>();
  ...
  randomMethod(){
     ...
     this.fileUploaded.emit(true);
  }

}

从我将要显示的父组件中调用randomMethod()
parent.ts.它不是在child.html中调用的.

parent.html

...
<child (fileUploaded)="onSubmit($event)"></child>
..

parent.ts

export class parentComponent {
   ...
   theChild = new childComponent;
   submitted = false;
   ...
   onSubmit(event: Boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }

  functionCallsChild(){
     this.theChild.randomMethod();
     ...
     this.theChild = new childComponent;
  }
}

我的应用程序从不记录“在onSubmit()”中,为什么不调用此方法？我也尝试不在我的最后一行创建一个新的子对象,但这并没有什么区别.

解决方法

您选择的子组件是错误的,您应该像这样使用ViewChild：

parent.html：

<child #theChild (fileUploaded)="onSubmit($event)"></child>

parent.ts：

export class parentComponent {
   ...
   @ViewChild('theChild') theChild;
   submitted = false;
   ...
   onSubmit(event: Boolean) { 
     console.log('in onSubmit()');
     this.submitted = event;
  }

  functionCallsChild(){
     this.theChild.randomMethod();
     ...
  }
}