Angular 6事件发射器 - 不起作用答案

【问题标题】：Angual 6 event emitter - does not workAngular 6事件发射器 - 不起作用
【发布时间】：2019-02-01 23:10:35
【问题描述】：

任何人都可以找出这段代码中的问题吗，我没有将事件返回给 appcomponent

test1.component.html

<input type="text" [(ngModel)]="mytext1" >
<button 
  id="clicked" 
  name="Click Me" 
  class="button"  
  (click)="returnData();">
  Click Me! 
</button>

test1.component.ts

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter
} from '@angular/core';
@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {
  constructor() {}
  @Input() mytext1: string;
  @Output() dataEmit: EventEmitter < string > = new EventEmitter < string > ();;

  ngOnInit() {}

  changeText1($event) {
    this.mytext1 = $event;
  }

  returnData() {
    console.log("button clicked");
    this.dataEmit.emit(this.mytext1);
  }

}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <app-test1 [mytext1]="childmessage" (returnData)="getTest1Data($event)"></app-test1>
  {{testText2}}
</div>

app.component.ts

import {
  Component,
  Input,
  OnInit
} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'AngularDemo';
  public testText2: string = "from parent";
  childmessage: string = "I am passed from Parent to child component";

  getToggle($event) {
    this.testText2 = $event;
  }

  ngOnInit() {

  }
}

我没有在 app.component.ts 上得到响应，也没有得到调试器。

【问题讨论】：

而不是 getToggle($event) { this.testText2 = $event; } 代码是 getTest1Data($event) { this.testText2 = $event; }
在您的 html 模板中，您写道 getTest1Data 函数应该在事件发出时触发。但是您的组件 ts 中没有函数 getTest1Data。
也没有一个名为returnData的Output绑定
感谢您的回复，但我使用的是 export class AppComponent implements OnInit { title = 'AngularDemo'; public testText2:string="来自父级"; childmessage : string = "我从父组件传递到子组件" getTest1Data($event) { this.testText2 = $event; } ngOnInit(){ } }
看看这个 StackBlitz 项目：stackblitz.com/edit/angular-kk8jwr

标签： angular angular6 angular-event-emitter

【解决方案1】：

您对事件发射器的绑定错误。您需要绑定到Output 参数，而不是绑定到发出（dataEmit 而不是returnData）事件的函数，并将getTest1Data 替换为getToggle

<app-test1 [mytext1]="childmessage" (dataEmit)="getToggle($event)"></app-test1>

【讨论】：

【解决方案2】：

您的输出名称是dataEmit。所以从这个重构你的组件调用

   <app-test1 [mytext1]="childmessage" (returnData)="getTest1Data($event)"></app-test1>

到这里：

   <app-test1 [mytext1]="childmessage" (dataEmit)="getTest1Data($event)"></app-test1>

【讨论】：

【解决方案3】：

问题出在这里：

<app-test1 [mytext1]="childmessage" (returnData)="getTest1Data($event)"></app-test1>

(returnData) 应该是 (dataEmit)

dataEmit 是实际事件（类型为 eventemitter）returnData 只是单击按钮时调用的方法:)

getTest1Data($event) 也应该是 getToggle($event)

希望这会有所帮助。

【讨论】：