角度4：如何在不由父級執行任何額外工作的情況下，通過子級組件中的更改值來更新父級組件的值

Question

我希望能夠完成自動更新（父控制器中的父控制器中的屬性的2向binding0，而父控制器不知道需要將@Output事件傳遞到子控制器中，就像我在下面這樣：

柱塞

應用程式

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'


@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>

    <div class="app">
      Parent: {{ myValue }}
      <myinput 
         [(zModel)]='myValue'
         (zChange)='valueChanged($event)'
      ></myinput> 
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
  myValue: string = 'Hello World';
  valueChanged(event) {
    //alert('app: onchange (' + event + ")");
    this.myValue = event;
  }
}

MyinputComponent

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

@Component({
    selector: 'myinput',
    template: `
      <hr>
   <div >
        Inside Component: <u>{{ zModel }}</u> <br/><br/>
        <input type="text" 
            [(ngModel)]="zModel"
            (input)="valueChanged($event)"
            >
   </div>
  `
})
export class MyinputComponent {
    @Input() 
    zModel: string = '';

    @Output()
    zChange: EventEmitter<string> = new EventEmitter<string>();

  valueChanged(item){
    //alert('onchange (' + this.zModel + ')');
        this.zChange.emit(this.zModel);
    }
}

Answer 1

如果不做任何額外的工作 ，則意味着您要從父級中刪除方法valueChanged 。 如果是這樣，則通過標記雙向綁定，您將走在正確的軌道上：

[(zModel)]='myValue'

要實現雙向綁定，您需要在子級中進行更改的唯一事情是實際上將后綴Change添加到變量的確切名稱。 所以代替

@Output()
zChange: EventEmitter<string> = new EventEmitter<string>();

它應該是

@Output()
zModelChange: EventEmitter<string> = new EventEmitter<string>();

因為您的@Input被標記為zModel 。

當然這也意味着在子valueChanged您需要標記正確的變量名稱：

valueChanged(item){
  this.zModelChange.emit(this.zModel);
}

因此，在完成這些更改后，您可以從父項中刪除valueChanged ，而子項標簽將如下所示：

<myinput [(zModel)]='myValue'></myinput> 

這是您更新的Plunker： http ://plnkr.co/edit/eYx5wXnYauzqKXtduOvX?p=preview