import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {
@Input()
greeting: string;
@Input()
user: {};
message = 'hello';
constructor() { }
ngOnInit() {
}
ngOnChanges(changes: SimpleChanges): void {
console.log(JSON.stringify(changes, null, 2));
}
}
<div>子组件</div>
<p>问候语{{greeting}}</p>
<p>用户{{user.name}}</p>
<input [(ngModel)]='message'>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
greeting = 'nihao';
user: { name: string } = { name: 'cys' };
}
<input [(ngModel)]="greeting" type="text">
<input [(ngModel)]="user.name" type="text">
<app-child [greeting]="greeting" [user]="user"></app-child>