EventEmitter在Angular 5中不起作用

Question

我有孩子控制器：

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

@Component({
    selector: 'select-test',
    templateUrl: 'select-test.component.html',
    styleUrls: ['select-test.component.css']
})
export class SelectTestComponent {
  @Input() model: any;
  @Output() public changeModel: EventEmitter<any> = new EventEmitter<any>();
}

HTML：

<input [(ngModel)]="model" (ngModelChange)="this.changeModel.emit(this.model)" />

父html：

<p>{{testData}}</p>
<select-test [(model)] = "testData"></select-test>

為什么子組件不更改父組件變量？

Answer 1

您的代碼應如下所示：

Component.ts：

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

@Component({
   selector: 'select-test',
   templateUrl: 'select-test.component.html',
   styleUrls: ['select-test.component.css']
})
export class SelectTestComponent {
   @Input() model: any;
   @Output() public changeModel: EventEmitter<any> = new EventEmitter();
}

Component.html：

<input [(ngModel)]="model" (ngModelChange)="changeModel.emit(model)" />

Parent.html：

<p>{{testData}}</p>
<select-test [(model)]="testData"></select-test> //TWO-WAY DATA BINDING
<select-test [model]="testData"></select-test> //OR ONE-WAY DATA BINDING

Answer 2

我找到解決辦法。 需要將changeModel名稱更改為modelChange。