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

【问题标题】：Call function in child component defined in parent component angular 2在父组件角度2中定义的子组件中调用函数
【发布时间】：2017-02-09 06:28:21
【问题描述】：

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

app.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";
  }
}

Child.ts

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

Attaching Plunker

【问题讨论】：

标签： angular typescript

【解决方案1】：

我认为您不能完全按照您的描述进行操作，但可以使用 Output 装饰器和 EventEmitter 实现相同的操作，如用于父子组件通信的 documentation 中所述。

您的子组件可以发出一个事件，下面是buttonClicked，并且父组件（即应用程序）可以使用所需的回调（即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);
  }
}

【讨论】：

【解决方案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";
  }
}

【讨论】：