首页 文章

使用回调函数作为组件@Input（）时的Angular2 Undefined Object属性

提问于
浏览 次
5

我试图将回调函数绑定到一个指令，当事件被触发时，父组件的属性是未定义的

app.ts

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {MyComponent} from './my-component';

@Component({
  selector: 'my-app',
  template: `
  <button (click)="appOnClick('CLICK FROM APP')">BUTTOM OUTSIDE COMPONENT</button>
  <br><br>
  <my-component [onClick]="appOnClick"></my-component>`,
  directives: [MyComponent]
})
export class MyApp { 

  public theBoundCallback: Function;
  test:string = "THIS SHOULD HAVE A VALUE";

  public ngOnInit(){
    this.theBoundCallback = this.appOnClick.bind(this);
  }

  appOnClick(someText){

    console.log(someText);
    console.log(this.test);

  }
}

bootstrap(MyApp);

我-component.ts

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'my-component',
  template: `<button (click)="onClick('CLICK FROM COMPONENT')">BUTTOM INSIDE COMPONENT</button>`
})
export class MyComponent{

  @Input() onClick: Function;

}

这将呈现两个按钮：

BUTTOM OUTSIDE COMPONENT，直接从应用程序调用appOnClick函数，当点击控制台显示：

  • 点击APP
  • 这应该有 Value

BUTTOM INSIDE COMPONENT，它通过组件中的@Input函数调用appOnClick函数，单击时控制台显示：

  • 点击APP
  • 未定义

我在Plunker上创建了这个例子

这是一种正确分配这种方式的方法，这样当触发回调时我可以使用我的对象属性吗？

callback typescript angular

2 回答

  • 0

    Updated plunkr

    为了以这种方式传递 appOnClick ，您需要将其声明为如下属性：

    export class MyApp {
  ...
  appOnClick = (someText) => {
    console.log(someText);
    console.log(this.test);
  }
}

    代替：

    export class MyApp {
  ...
  appOnClick(someText){
    console.log(someText);
    console.log(this.test);
  }
}
    回复于
  • 12

    我认为您在使用appOnClick方法时忘记了“（...）”并在配置事件处理程序时使用“[...]”而不是“（...）”：

    <my-component (onClick)="appOnClick($event)"></my-component>`,

    此外，在子组件中，您需要使用“@Output”定义自定义事件：

    @Component({
  selector: 'my-component',
  template: `<button (click)="handleClick('CLICK FROM COMPONENT')">BUTTOM INSIDE COMPONENT</button>`
})
export class MyComponent{
  @Output()
  onClick:EventEmitter<string> = new EventEmitter();

  handleClick(txt:string) {
    this.onClick.emit(txt);
  }     
}
    回复于

相关问题