Angular2：如何使用其他组件的双向绑定变量来链接ngModel？

Question

我有一个main-component，它通过自定义双向绑定将变量传递给另一个组件sub-component。传递的变量通过ngModel用于输入标记。

这两个变量目前尚未同步。我如何将这两个变量链接起来？

main.component.ts

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

@Component({
  selector: 'app-main-component',
  templateUrl: './main-component.component.html',
  styleUrls: ['./main-component.component.css']
})
export class MainComponentComponent implements OnInit {

  private you: any = {};

  constructor() { }

  ngOnInit() {
    this.you.name = "Name";
  }
}

main.component.html

<div>
  This is the main component.
  you.name = {{you.name}}
  <br>
  <app-sub-component [(variable)]="you.name"></app-sub-component>
</div>

sub.component.ts

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

@Component({
  selector: 'app-sub-component',
  templateUrl: './sub-component.component.html',
  styleUrls: ['./sub-component.component.css']
})
export class SubComponentComponent implements OnInit, OnChanges {

  constructor() { }

  @Input() variable: any;

  @Output() variableChange: EventEmitter<any> = new EventEmitter<any>();

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

sub.component.html

<input type="text" [(ngModel)]="variable">

Variable = {{variable}}

鉴于上述配置， 我希望主要组件中的变量you.name和子组件中的变量variable保持同步。

如何实现这一目标？

Answer 1

您应该对孩子使用onModelChange()。这是一个例子：

DEMO

儿童：

  @Input() name;
  @Input() surname;
  @Input() age;

  @Output() nameChange = new EventEmitter();
  @Output() surnameChange = new EventEmitter();
  @Output() ageChange = new EventEmitter();


  onModelChange(event, type) { 
    this[`${type}Change`].emit(event); //this line was optimised by yurzui
  }

<强>父：

@Component({
  selector: 'my-app',
  template: `
      <child [(name)]="name" [(surname)]="surname" [(age)]="age"></child>
      <br><br>
      Name :{{name}} 
      <br>
      Surname: {{surname}} 
      <br>
      Age: {{age}} 
      <br>
      <button (click)="reset()">Reset</button>
  `,
})
export class AppComponent implements OnInit{
  name:string;
  surname:string;
  age:number;


  reset(){
    this.name = "";
    this.surname = "";
    this.age = 18;
  } 

  ngOnInit(){
    this.reset();
  }

}