web-dev-qa-db-fra.com

Angular2 Component @Input bi-way binding

J'ai une application basée sur les données Angular. J'ai un composant bascule que je passe dans un état basculé. Mon problème est que la liaison de données bidirectionnelle ne semble pas fonctionner à moins que je ne passe dans la bascule booléen en tant qu'objet. Y a-t-il un moyen de faire fonctionner ceci sans utiliser EventEmitter ni passer la variable sous forme d'objet. Il doit s'agir d'un composant réutilisable et l'application est fortement pilotée par les données la valeur en tant qu'objet n'est pas une option. Mon code est ....

toggle.html

<input type="checkbox" [(ngModel)]="toggled" [id]="toggleId" name="check"/>

toggle.component.ts

import { Component, Input, EventEmitter, Output } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'toggle-switch',
  templateUrl: 'toggle-switch.component.html',
  styleUrls: ['toggle-switch.component.css']
})

export class ToggleSwitchComponent {

  @Input() toggleId: string;
  @Input() toggled: boolean;

}

parent.component.html

<toggle-switch toggleId="toggle-1" [(toggled)]="nongenericObject.toggled"></toggle-switch>
angulartypescriptdata-bindingcomponentsdecorator
36
Steve Fitzsimons

Pour que [(toggled)]="..." fonctionne, il vous faut

  @Input() toggled: boolean;
  @Output() toggledChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  changeValue() {
    this.toggled = !(this.toggled); 
    this.toggledChange.emit(this.toggled);
  }

Voir aussi Liaison bidirectionnelle

[MISE À JOUR] - 25 juin 2019
D'après le commentaire de @ Mitch ci-dessous:
Il est intéressant de noter que le @Output nom doit être le même que le @Input nom, mais avec Change à la fin. Vous ne pouvez pas l'appeler onToggle ou autre chose. C'est une convention de syntaxe.

66
Günter Zöchbauer

Bien que la question a plus de 2 ans, je veux contribuer mes 5 centimes ...

Ce n’est pas un problème avec Angular, mais avec le fonctionnement de Javascript. Les variables simples (nombre, chaîne, booléen, etc.) sont passées par valeur, alors que les variables complexes (objets, tableaux) sont passées par référence:

Vous pouvez en savoir plus à ce sujet dans la série de Kyle Simpson Vous ne savez pas js:

https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md#value-vs-reference

Ainsi, vous pouvez utiliser une variable d'objet @Input () pour partager la portée entre des composants sans avoir besoin d'utiliser d'émetteurs, d'observateurs ou autres.

// In toggle component you define your Input as an config object
@Input() vm: Object = {};

// In the Component that uses toggle componet you pass an object where you define all needed needed variables as properties from that object:
config: Object = {
    model: 'whateverValue',
    id: 'whateverId'
};

<input type="checkbox" [vm]="config" name="check"/>

De cette façon, vous pouvez modifier toutes les propriétés de l'objet et obtenir la même valeur dans les deux composants, car ils partagent la même référence.

0
manguiti