如何从另一个组件调用一个组件中的方法是 angular2

Question

这里方法 load() 在app.component.ts定义， <app-child></app-child>在app.component.html传递， 'load('1', 'value', msc)'方法是从child.component.html 。

如何调用load()方法？

app.component.ts
    -----------------
    load(id, value, msc){
    alert(id)
    }
    app.component.html
    ----------------------
    <app-child></app-child>

    child.component.html
    ---------------------
    <div (click)= 'load('1', 'value', msc)'>btn1</div>

Answer 1

您可以使用共享服务并使公共功能在两个组件中都可用

Answer 2

您可以为此使用事件绑定：

// parent template
<app-child (onLoad)="load(...$event)></app-child>

// child template
<div (click)='onLoad.emit(['1', 'value', msc])'>btn1</div>    

// child controller
@Output() onLoad = new EventEmitter<any>();

https://angular.io/guide/template-syntax#custom-events-with-eventemitter

Answer 3

您可以使用 @Output 并发出一个包含三个参数的对象：

 // app.component.ts: load(id, value, msc){ alert(id) } loadEv = ($event) => { this.load($event.param1, $event.param2, $event.param3); } // app.component.html: <app-child (loadEvent) = loadEv($event)></app-child> // child.component.html: <div (click)= 'load('1', 'value', msc)'>btn1</div> // child.component.ts: import { Output, EventEmitter } from '@angular/core'; @Output() loadEvent = new EventEmitter<any>(); load(param1, param2, param3): any { this.loadEvent.emit({param1, param2, param3}); }