Излучатель событий Angual 6 - не работает

Может ли кто-нибудь определить, что не так в этом коде, я не возвращаю событие обратно в 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, ни отладчика.


person Mehul    schedule 27.08.2018    source источник
comment
вместо этого getToggle($event) { this.testText2 = $event; } код getTest1Data($event) { this.testText2 = $event; }   -  person Mehul    schedule 27.08.2018
comment
в вашем html-шаблоне вы пишете, что функция getTest1Data должна запускаться при возникновении события. Но в вашем компоненте ts нет функции getTest1Data.   -  person Pac0    schedule 27.08.2018
comment
Также нет привязки Output под названием returnData   -  person user184994    schedule 27.08.2018
comment
Спасибо за ответ, но я использовал класс экспорта AppComponent, реализующий OnInit { title = 'AngularDemo'; общедоступный testText2: строка = от родителя; childmessage : string = Я перешел от родительского к дочернему компоненту getTest1Data($event) { this.testText2 = $event; } нгОнинит(){ } }   -  person Mehul    schedule 27.08.2018
comment
Просто взгляните на этот проект StackBlitz: stackblitz.com/edit/angular-kk8jwr   -  person SiddAjmera    schedule 27.08.2018


Ответы (3)


У вас неправильная привязка к эмиттеру событий. Вам нужно выполнить привязку к параметру Output, а не к функции, которая генерирует (dataEmit вместо returnData) событие, и заменить getTest1Data на getToggle

<app-test1 [mytext1]="childmessage" (dataEmit)="getToggle($event)"></app-test1>
person Suren Srapyan    schedule 27.08.2018

Ваше выходное имя dataEmit. Итак, рефакторинг вашего вызова компонента из этого

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

к этому:

   <app-test1 [mytext1]="childmessage" (dataEmit)="getTest1Data($event)"></app-test1>
person Alexandre Annic    schedule 27.08.2018

Проблема здесь:

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

(returnData) должно быть (dataEmit)

dataEmit - это фактическое событие (типа eventemitter), returnData - это просто метод, вызываемый нажатием кнопки :)

Также getTest1Data($event) должен быть getToggle($event)

Надеюсь это поможет.

person Vinod Bhavnani    schedule 27.08.2018