Angolare 2, @Input getter/setter

Sto lavorando in angolare progetto, possiamo anche usare angularjs componenti.

Invece di utilizzare un @variabile di input, ho voluto usare i metodi getter e setter, ma è venuto attraverso il disegno seguente. Io sono curioso di come, ma che faccio fatica a trovare info su questo.

questo funziona

<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;
    }

questo non

<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;
    }

Potrebbe, per favore, mi spieghi perché?

Grazie

OriginaleL’autore Edgar | 2017-05-05

One Reply
  1. 7

    Forse nella 2 ° versione ti manca Evento Emettitore per l’associazione bidirezionale lavoro.

    È necessario aggiungere abcChange

    Si prega di dare un’occhiata a questa demo qui – è lavorare bene:

    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 {}

    Demo Online: http://plnkr.co/edit/y9GVu7?p=preview

    Beh, deve essere qualcosa nel mio codice, e quindi ottenere quella sciocca -1 da un arrabbiato con qualcuno. L’emettitore nel tuo esempio non sta facendo nulla, quindi si può solo toglierlo. Il getter/setter da solo va bene. Grazie per la risposta.

    OriginaleL’autore Tiep Phan

Lascia un commento