[英]Angular 2, @Input getter/setter
我正在進行角度項目,我們也使用angularjs組件。
我沒有使用@input變量,而是想使用getter和setter,但是遇到了以下情況。 我很好奇如何,但我發現很難找到這方面的信息。
這很有效
<foobar [(model)]="model"></foobar>
TS CODE:
@Input() set model(value: any) {
this._model= value;
console.log('I am here:', value);
}
get model() {
return this._model;
}
這不
<foobar [(abc)]="model"></foobar>
TS CODE:
@Input('abc') set model(value: any) {
this._model= value;
console.log('I am here:', value);
}
get model() {
return this._model;
}
你能解釋一下為什么嗎?
謝謝
也許在第二個版本中你缺少用於雙向綁定工作的Event Emitter。
你需要添加abcChange
請看這個演示 - 它的工作正常:
import {Component, NgModule, VERSION, Input, Output, EventEmitter} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
@Component({
selector: 'tpc-ts',
template: `
<input [(ngModel)]="model">
<div>{{model}}</div>
`
})
export class TsComponent {
_model: string;
@Output()
valueChange: EventEmitter<string> = new EventEmitter<string>();
@Input('value')
set model(value: string) {
this._model = value;
this.valueChange.emit(this._model);
}
get model() {
return this._model;
}
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<tpc-ts [(value)]="name"></tpc-ts>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = `Angular! v${VERSION.full}`
}
}
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App, TsComponent ],
bootstrap: [ App ]
})
export class AppModule {}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.