web-dev-qa-db-fra.com

Entrée et sortie personnalisées sur le même nom dans la liaison 2 voies Angular2

Je sais comment réparer mon composant en utilisant un nom différent pour la valeur de sortie de ce composant.

laisse moi partager mon code

import {Component, Input, Output, EventEmitter} de '@ angular/core'; importer {TranslationPipe} depuis "../pipes/translation.pipe";

@Component({
  selector: 'msisdn-confirm',
  template: `
  <div class="msisdn-confirm">
    <div>
      <input type="text" [(ngModel)]="m1">
    </div>
    <div>
      <input type="text" [(ngModel)]="m2">
    </div>
    <p class="error">{{message}}</p>
  </div>
`
})
export class MsisdnConfirm {
  message:string;
  @Output('mobile') emitter: EventEmitter<string> = new EventEmitter<string>();
  @Input('mobile') set setMobileValue(value) {
    this.msisdn_confirm = this.msisdn = value;
  }

  set m1(value) {
    this.msisdn = value;
    if (this.valid()) {
      console.log('emit' + this.msisdn);
      this.emitter.emit(this.msisdn);
    }
  }

  set m2(value) {
    this.msisdn_confirm = value;
    if (this.valid()) {
      console.log('emit' + this.msisdn);
      this.emitter.emit(this.msisdn);
    }
  }

  get m1():string {
    return this.msisdn;
  }
  get m2():string {
    return this.msisdn_confirm
  }

  msisdn: string;
  msisdn_confirm: string;

  constructor() {

  }

  private valid(): boolean {
    if (!/06[0-9]{8}/.test(this.msisdn)) {
      this.message = new TranslationPipe().transform("Het mobiele nummer is incorrect, (bijvoorbeeld: 0612345678)")
      return false;
    } else if (this.msisdn != this.msisdn_confirm) {
      this.message = new TranslationPipe().transform("De mobiele nummers komen niet overeen")
      return false;
    }
    this.message = null;
    return true;
  }
}

Il s'agit donc d'un composant très basique qui valide deux chaînes pour être un numéro mobile néerlandais "valide", donc une boîte de confirmation pour ainsi dire. Maintenant, je peux obtenir ma valeur dans le composant parent en faisant quelque chose comme

(mobile)="myParam = $event"

Je veux l'utiliser comme

[(mobile)]="myParam"

Cela ne fonctionne que pour le réglage, n'est-ce pas pris en charge sur les composants personnalisés?

data-bindingtypescriptangular
17
Mathijs Segers

Pour que cette syntaxe compacte fonctionne, l'entrée et la sortie doivent suivre des règles de dénomination spécifiques

[(mobile)]="myParam"

  @Output('mobileChange') emitter: EventEmitter<string> = new EventEmitter<string>();
  @Input('mobile') set setMobileValue(value) {
    this.msisdn_confirm = this.msisdn = value;
  }

Renommer les entrées et les sorties en passant un paramètre de chaîne au décorateur est décourageant. Plutôt utiliser

  @Output() mobileChange: EventEmitter<string> = new EventEmitter<string>();
  @Input() set mobile(value) {
    this.msisdn_confirm = this.msisdn = value;
  }
31
Günter Zöchbauer

Un autre exemple du code de Gunter ci-dessus qui peut aider:

export class TaskBook {
  public taskBookID: number;
  public title: String; 
}

Code composant intérieur:

   ....
    <input type="text"  pInputText [(ngModel)]="data!.title" (change)="onDataChange()" />
   ....

 @Component({
  selector: 'taskbook_edit',
  templateUrl: './taskbook_edit.component.html' 
})
    export class TaskbookEditComponent { 

      @Input() data: TaskBook;
      @Output() dataChange = new EventEmitter<TaskBook>();

      constructor() { } 

      onDataChange() { 
        this.dataChange.emit(this.data);
      }  
    }

À l'extérieur dans le composant appelant:

<taskbook_edit  [(data)]="taskbookObj" ></taskbook_edit>

 public taskbookObj: TaskBook;
6
davaus