组件

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();}