Angular 函数内的 2 个按钮小部件所有页面加载变量未定义

Question

我为按钮元素创建了一个通用小部件。

小部件 - TS:

import { Component, Input, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './app-button.component.html',
  styleUrls: ['./app-button.component.less']
})

export class AppButtonComponent {
//parameter

@Input() public callback : Function;

}

小工具 - html:

<button (click)="callback()" type="button">TestButton</button>

另一个组件，我使用上面的按钮组件：

HTML:

<app-button [callback]="clickEvent"></app-button>

TS:

import { Component, AfterViewInit, ViewChild, ContentChild, Input } from '@angular/core';
@Component({
  moduleId:"appComponent",
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})

export class AppComponent {
user={
    name:"test",
    placeholder:"plac"
  }
userString='';
   public clickEvent(){
        this.userString = JSON.stringify(this.user);
        console.info('obj = '+ this.userString);
      }
}

我在点击按钮后得到以下控制台消息：

obj = undefined

如果我错过了什么，这就是我没有将页面加载变量放入按钮回调函数的原因。

提前致谢。

Answer 1

为了从指令和组件发出自定义事件，建议使用 EventEmitter

所以进行以下更改并再次检查：

// 小部件

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

@Component({
  selector: 'app-button',
  templateUrl: './app-button.component.html',
  styleUrls: ['./app-button.component.less']
})

export class AppButtonComponent {
  //parameter

  @EventEmitter() public callback: EventEmitter<any> = new EventEmitter();

  public onClick(e) {
    this.callback.emit(e);
  }

}

// 小部件 HTML

<button (click)="onClick($event)" type="button">TestButton</button>

// 用法

<app-button (callback)="clickEvent($event)"></app-button>

//组件

export class AppComponent {
  public userString:string = '';
  public user: any = {
    name:"test",
    placeholder:"plac"
  };

  public clickEvent(){
    this.userString = JSON.stringify(this.user);
    console.info('obj = '+ this.userString);
  }
}

Answer 2

您正在使用常规函数作为回调。当它在 AppButtonComponent 中被调用时，this 指的是你的函数对象而不是 AppComponent.

改为发送一个箭头函数，它采用定义它的对象的范围，而不是调用它的地方。

 clickEvent=()=>{
        this.userString = JSON.stringify(this.user);
        console.info('obj = '+ this.userString);
      }

Angular 函数内的 2 个按钮小部件所有页面加载变量未定义

Angular 2 button widget inside function all page load variable gets undefined

angular2-directives

angular2-components

angular