angular 自定义组件的双向数据绑定

组件

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

@Component({
  selector: 'app-modal',
  template: `
    <div>
      <p>{{data}}</p>
      <p><button (click)="change()")>Change</button></p>
    </div>
  `
})
export class AppModalComponent {
  // 双向绑定
  @Input() data = '';
  @Output() dataChange = new EventEmitter<string>();

  public change() {
    this.data = new Date().toUTCString();
    this.dataChange.emit(this.data);
  }
}

使用

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

@Component({
  selector: 'app-demo',
  template: `
    <p>{{modalData}}</p>
    <p><app-modal [(data)]="modalData"></app-modal></p>
  `
})
export class AppDemoComponent {
  public modalData = new Date().toUTCString();
}