Question

我有两个组件app和child。在子组件中，我有一个按钮，我正在调用一个函数（函数名称被分配给一个使其成为动态的变量），这是在app组件中定义的。但这不起作用。有什么帮助吗？

app.ts

2>nul

Child.ts

selector: 'my-app',
template: `
  <div>
    <h2>Hello {{name}}</h2>
    <child-comp></child-comp>
    <p>{{data}}</p>
  </div>
`,
})
export class App {
  name:string;
  data: string;
  constructor() {
    this.name = 'Angular2'
  }
  dummyFunction(){  // I want to call this function
      data = "function called";
  }
}

Attaching Plunker

Answer 1

我认为你不能完全按照你所描述的那样做，但是可以使用Output装饰器和EventEmitter来完成相同的事情，如documentation中描述的父母一样组件沟通。

您的子组件可以在下面发出一个事件buttonClicked，并且父组件（即app）可以使用所需的回调绑定到该事件（即dummyFunction()）

应用组件

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <child-comp (buttonClicked)="dummyFunction()"></child-comp>
      <p>{{data}}</p>
    </div>
  `,
})
export class App {
  name:string;
  data: string;
  constructor() {
    this.name = 'Angular2'
  }

  dummyFunction(){ // I want to call this function
    this.data = "function called";
  }
}

和儿童组件

import {Component, Output, EventEmitter} from '@angular/core'

@Component({
  selector: 'child-comp',
  template: `
    <input type="button" value="click me" (click) = "onClick($event)"> // Here I am calling the function which is assign to a variable
  `,
})
export class ChildComp {

  @Output() buttonClicked = new EventEmitter();
  constructor() {
  }

  onClick($event){
    this.buttonClicked.emit($event);
  }
}

Answer 2

如果只调用子方法

<强> Child.ts

@Component({
  selector: 'child-comp',
  template: `
    <input type="button" value="click me" (click)="this[funcName]()">  // Here I am calling the function which is assign to a variable
  `,
})
export class ChildComp {
  funcName: string;
  constructor() {
    this.funcName = 'dummyFunction';  // assigning function name to variable
  }
  dummyFunction() {
    console.log('do something')
  }
}

或

@Component({
  selector: 'child-comp',
  template: `
    <input type="button" value="click me" (click)="funcName()"> // callhere
  `,
})
export class ChildComp {
  funcName: Fn;
  constructor() {
    this.funcName = this.dummyFunction.bind(this);  // assigning function to variable
  }
  dummyFunction() {
    console.log('do something')
  }
}

如果您需要来自父母和孩子的沟通：

@Component({
  selector: 'child-comp',
  template: `
    <input type="button" value="click me" (click)="funcName()"> // callhere
  `,
})
export class ChildComp {
  @Input()
  funcName: Fn;
  constructor() {
  }
}

@Component({
selector: 'my-app',
template: `
  <div>
    <h2>Hello {{name}}</h2>
    <child-comp [funcName]="dummyFunction"></child-comp>
    <p>{{data}}</p>
  </div>
`,
})
export class App {
  name:string;
  data: string;
  constructor() {
    this.name = 'Angular2';
    this.dummyFunction = this.dummyFunction.bind(this);
  }
  dummyFunction(){  // I want to call this function
      data = "function called";
  }
}

或使用输出

import {Component, Output, EventEmitter } from '@angular/core'

@Component({
  selector: 'child-comp',
  template: `
    <input type="button" value="click me" (click)="onClick($event)">
  `,
})
export class ChildComp {

  @Output() eventName = new EventEmitter();
  constructor() {

  }
  onClick(e) {
    // do something here
    this.eventName.emit(e);
  }
}

父：

@Component({
selector: 'my-app',
template: `
  <div>
    <h2>Hello {{name}}</h2>
    <child-comp (eventName)="dummyFunction()"></child-comp>
    <p>{{data}}</p>
  </div>
`,
})
export class App {
  name:string;
  data: string;
  constructor() {
    this.name = 'Angular2';
  }
  dummyFunction(){  // I want to call this function
      data = "function called";
  }
}

在父组件角度2中定义的子组件中调用函数

2 个答案: