[英]Angular 2, @Input getter/setter
I'm working in an angular project, we also use angularjs components. 我正在进行角度项目,我们也使用angularjs组件。
Instead of using a @input variable, I wanted to use getter and setters, but came across the following bellow. 我没有使用@input变量,而是想使用getter和setter,但是遇到了以下情况。 I am curious to how, but am find it hard to find info on this.
我很好奇如何,但我发现很难找到这方面的信息。
this works 这很有效
<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;
}
this doesn't 这不
<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;
}
Could you please explain to me why? 你能解释一下为什么吗?
Thanks 谢谢
Maybe in 2nd version you're missing Event Emitter for two-way binding work. 也许在第二个版本中你缺少用于双向绑定工作的Event Emitter。
You need add abcChange
你需要添加
abcChange
Please take a look this demo here - it's work fine: 请看这个演示 - 它的工作正常:
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 {}
Online demo: http://plnkr.co/edit/y9GVu7?p=preview 在线演示: http : //plnkr.co/edit/y9GVu7?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.