Angular2 Composant @Input liaison bidirectionnelle

J'ai piloté par les données Angulaires de l'application. J'ai une bascule composant que je passe dans une basculé de l'état. Mon problème est que les deux sens de la liaison de données ne semble pas fonctionner à moins que je passe dans la bascule booléenne comme un objet. Est-il un moyen pour obtenir que cela fonctionne sans l'aide d'un EventEmitter ou de passer la variable en tant qu'objet. C'est un composant réutilisable et que la demande est largement piloté par les données ainsi passer 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"/>

bascule.composante.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>
stackoverflow.com/documentation/angular2/8943/...
Je tiens à souligner l'importance de mitch commentaire sur cette. Faire deux voies de liaison avec un parent du composant var travail, la @Output décorées EventEmitter doit être nommé en tant que correspondant @Input avec un Modifier suffixe à la fin, comme dans: @Input() activée: boolean; @Output() toggledChange: EventEmitter<boolean> = new EventEmitter<boolean>();

OriginalL'auteur Steve Fitzsimons | 2017-02-02

  1. 52

    Pour [(toggled)]="..." à travailler, vous devez 

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

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

    Voir aussi La liaison bidirectionnelle

    Il va être très déçue par le fait que "sans l'aide d'un EventEmitter ou de passer la variable en tant qu'objet" ne peut pas être respectées. C'est comme s'il n'avait pas lu la syntaxe de base, oh, hé, un lien à la syntaxe guide.
    Il a même importé EventEmitter. Il ne pourrait pas aussi mauvais que vous attendez 😉
    En fait, cela a fonctionné pour moi. J'avais d'abord eu qu'à utiliser le cas de l'émetteur qui a été liée à une fonction dans le composant parent. Qui n'était pas très réutilisable donc pourquoi j'ai posé la question pour voir si il y avait un moyen de le faire. Cette réponse pour une raison quelconque modifie le parent basculé variable
    Il est néanmoins plutôt ennuyeux qui Angulaire n'est pas intégré dans la poignée de manière à 2 voies de liaison sur un attribut. Semble être une super fonctionnalité de base; cependant, il n'est tout simplement pas pris en charge. Aussi, l'angle de docs sont incroyablement compliqué et difficile à comprendre, donc je ne serais pas surpris si l'OP n'ai pas compris comment le faire même après leur lecture.
    Il est intéressant de noter que la @Output nom doit être le même que le @Input nom, mais avec Change sur la fin. Vous ne pouvez pas l'appeler onToggle ou quelque chose. C'est une syntaxe de la convention.

    OriginalL'auteur Günter Zöchbauer