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

您可以使用事件绑定：

// 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 2

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

Answer 3

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

＆＃13;

// 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});
}

＆＃13;

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

3 个答案: