Angular 2，@Input getter/setter

我在一個角度項目中工作，我們也使用angularjs組件。Angular 2，@Input getter/setter

我不想使用@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; 
    }

能否請您解釋一下爲什麼？

感謝

來源

2017-05-05 Edgar

也許在第二個版本你失蹤事件發射器的雙向綁定工作。

您需要添加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 {}

在線演示：http://plnkr.co/edit/y9GVu7?p=preview

來源

2017-05-05 12:21:28

嗯，一定是什麼在我的代碼，因此從一個憤怒的人那裏得到那個愚蠢的-1。你的例子中的發射器沒有做任何事情，所以你可以刪除它。單獨的吸氣/吸氣裝置很好。感謝您的回答。 – Edgar

Angular 2，@Input getter/setter

回答

相關問題