で、親が更新された値を受け取ります。
これはデモです:
app.ts
//our root app component
import {Component, NgModule,OnInit,OnChanges} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {Test} from './test';
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}} from parent</h2>
<test [(message)]="name"></test>
</div>
`,
})
export class App implements OnInit,OnChanges{
name:string;
constructor() {
console.log('==constructor==')
this.name = 'Angular2'
}
ngOnInit(){
// this.myService.someMethod()
console.log('==ngOnInit==')
}
ngOnChanges() {
console.log('onChange fired');
}
}
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ App ,Test],
bootstrap: [ App ]
})
export class AppModule {}
test.ts
import { Component, NgModule,OnInit,OnChanges,Input, Output, EventEmitter } from '@angular/core'
@Component({
selector: 'test',
template: `
<div>
{{message}}
<input type="text" [ngModel]= "message" (ngModelChange)="onModelChange($event)"/>
</div>
`,
})
export class Test implements OnInit,OnChanges{
name:string;
@Input() message;
@Output() messageChange = new EventEmitter('');
constructor() {
console.log('==constructor==')
this.name = 'Angular2'
}
ngOnInit(){
// this.myService.someMethod()
console.log('==ngOnInit==')
}
ngOnChanges() {
console.log('onChange fired');
}
onModelChange(event) {
this.message = event;
this.messageChange.emit(this.message);
}
}
デモ:https://plnkr.co/edit/nU9Qkuf7bwgSga7Ce2Wc?p=preview
が、これはカスタム双方向であります角度で結合する。
<test [(message)]="name"></test>
同等:messageChange
子コンポーネントからのイベントである
<test [message]="name"(messageChange)="message = $event"></test>
。
実際には**私のコンソールで起動しています。まさにこの問題は何ですか? – smnbbrv
ngOnChangesは@Input参照が変更されたときにのみ起動します –
発砲していませんか?このメッセージは表示されませんonChange解雇 – user944513