web-dev-qa-db-fra.com

Angular2 - liaison de données bidirectionnelle sur une variable de composant / propriété de classe de composant?

Dans Angular2 (Beta 6), j'ai un composant pour un menu principal.

<mainmenu></mainmenu>

Je veux lier un booléen pour large ou étroit. Je l'ai donc transformé en ceci:

<mainmenu [(menuvisible)]="true"></mainmenu>

Mais ce que je veux (je pense) est de lier à une propriété de classe javascript (car j'ai peut-être d'autres choses à lier mais je veux être bien rangé en utilisant une seule classe dans le composant).

Je reçois une erreur

EXCEPTION: Erreurs d'analyse de modèle: nom de propriété non valide 'menumodel.visible' ("

] [(menumodel.visible)] = "menumodel.visible">

Si j'essaye la même chose avec une seule variable au lieu d'une classe, j'obtiens:

Erreurs d'analyse du modèle: Erreur de l'analyseur: jeton inattendu '='

Cependant, cela (liaison unidirectionnelle?) Semble fonctionner (mais je pourrais vouloir déclencher le menu pour qu'il soit large/étroit à partir d'un autre composant, donc je pense que cela devrait être une propriété liée aux données bidirectionnelle):

<menu [vis]="true"></menu>

Ceci est un peu de mon composant de menu:

@Component({
    selector: 'menu',
    templateUrl: './app/menu.html',
    providers: [HTTP_PROVIDERS, ApplicationService],
    directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgForm]
})
export class MenuComponent implements OnInit {

    mainmenu: MainMenuVM;

    constructor(private _applicationService: ApplicationService) {
        this.mainmenu = new MainMenuVM();
    }

    // ...ngOnInit, various functions

}

Voici ma classe MainMenu View Model

export class MainMenuVM {
    public visible: boolean;
    constructor(
    ) { this.visible = true; }
}

J'essaie de créer un menu qui contient des icônes et du texte, mais qui peut se limiter à afficher uniquement des icônes. Je vais émettre cet événement vers le haut vers un composant parent pour modifier la position du conteneur à côté du menu. Déclencher un conteneur de contenu à maximisé déclenchera un rétrécissement du menu - je ne dis pas que c'est la meilleure façon, mais je voudrais résoudre cette question particulière avant d'aller plus loin.

Veuillez noter: je ne fais pas de liaison de données à un contrôle d'entrée ici - juste une liaison de données à un composant afin de pouvoir ensuite modifier l'interface utilisateur.

Cela provient de la Angular cheatsheet

<my-cmp [(title)]="name">   
Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

Merci d'avance!

[~ # ~] mise à jour [~ # ~]

Intégrer le code de la réponse acceptée et adapter pour mon cas d'utilisation particulier ici le code de travail final:

app.html

...header html content

// This is what I started with
<!--<menu [menuvisible]="true" (menuvisibleChange)="menuvisible=$event"></menu>-->

// This is two way data binding
// 1. Banana-in-a-box is the input parameter
// 2. Banana-in-a-box is also the output parameter name (Angular appends it's usage with Change in code - to follow shortly)
// 3. Banana-in-a-box is the short hand way to declare the commented out code
// 4. First parameter (BIAB) refers to the child component, the second refers the variable it will store the result into.
// 5. If you just need an input use the remmed out code with just the first attribute / value
<menu [(menuvisible)]="menuvisible"></menu>

.. div content start 
<router-outlet></router-outlet>
.. div content end

app.component.ts (root)

export class AppComponent implements OnInit{
   menuvisible: Boolean;
}

menu.component.ts (enfant de la racine)

export class MenuComponent implements OnInit {
    // Parameters - notice the appending of "Change"
    @Input() menuvisible: boolean;
    @Output() menuvisibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();

    // Init
    ngOnInit() {
        // Populate menu - fetch application list       
        this.getApplications();

        // Initially we want to show/hide the menu depending on the input parameter
        (this.menuvisible === true) ? this.showMenu() : this.hideMenu();
    }

    //...more code
}

menu.html

<div id="menu" [ngClass]="menuStateClass" style="position: absolute; top:0px; left: 0px;z-index: 800; height: 100%; color: #fff; background-color: #282d32">
    <div style="margin-top: 35px; padding: 5px 0px 5px 0px;">

        <ul class="menuList" style="overflow-x: hidden;">
            <li>IsMenuVisible:{{menuvisible}}</li>
            <li style="border-bottom: 1px solid #3d4247"><a (click)="toggleMenu()"><i class="fa fa-bars menuIcon" style="color: white; font-size: 16px;"></i></a></li>
            <li *ngFor="#app of applications">
                <a [routerLink]="[app.routerLink]">
                    <i class="menuIcon" [ngClass]="app.icon" [style.color]="app.iconColour" style="color: white;"></i>
                    <span [hidden]="menuStateTextHidden">{{ app.name }}</span>
                </a>
            </li>
        </ul>

    </div>
</div>

N'oubliez pas d'importer ce dont vous avez besoin, par exemple.

import {Component, EventEmitter, OnInit, Input, Output} depuis 'angular2/core';

Recommande fortement cette vidéo sur You Tube: Tutoriel Angular 2 (2016) - Entrées et sorties

javascriptangulardata-binding2-way-object-databinding
22
DanAbdn

Pour une liaison bidirectionnelle, vous avez besoin de quelque chose comme:

@Component({
    selector: 'menu',
    template: `
<button (click)="menuvisible = !menuvisible; menuvisibleChange.emit(menuvisible)">toggle</button>
<!-- or 
   <button (click)="toggleVisible()">toggle</button> -->
`,
    // HTTP_PROVIDERS should now be imports: [HttpModule] in @NgModule()
    providers: [/*HTTP_PROVIDERS*/, ApplicationService],
    // This should now be added to declarations and imports in @NgModule()
    // imports: [RouterModule, CommonModule, FormsModule]
    directives: [/*ROUTER_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgForm*/]
})
export class MenuComponent implements OnInit {
    @Input() menuvisible:boolean;
    @Output() menuvisibleChange:EventEmitter<boolean> = new EventEmitter<boolean>();

    // toggleVisible() {
    //   this.menuvisible = !this.menuvisible;       
    //   this.menuvisibleChange.emit(this.menuvisible);
    // }
}

Et utilisez-le comme

@Component({
  selector: 'some-component',
  template: `
<menu [(menuvisible)]="menuVisibleInParent"></menu>
<div>visible: {{menuVisibleInParent}}</div>
`
  directives: [MenuComponent]
})
class SomeComponent {
  menuVisibleInParent: boolean;
}
33
Günter Zöchbauer

J'ai créé un court plunkr.

ngModel Like Two-Way-Databinding pour les composants

Vous avez au moins deux possibilités pour créer une liaison de données bidirectionnelle pour les composants

V1: Avec ngModel Like Syntax, vous devez créer une propriété @Output avec la même ligne de nom la propriété @Input + "Modifier" à la fin du nom de la propriété @Output

@Input() name : string;
@Output() nameChange = new EventEmitter<string>();

avec V1, vous pouvez désormais vous lier au composant enfant avec la syntaxe ngModel

[(name)]="firstname"

V2. Créez simplement une propriété @Input et @Output avec le nom que vous préférez

@Input() age : string;
@Output() ageChanged = new EventEmitter<string>();

avec V2, vous devez créer deux attributs pour obtenir la liaison de données bidirectionnelle

[age]="alter" (ageChanged)="alter = $event"

Composant parent

import { Component } from '@angular/core';

@Component({
   selector: 'my-app',
   template: `<p>V1 Parentvalue Name: "{{firstname}}"<br/><input [(ngModel)]="firstname" > <br/><br/>
              V2 Parentvalue Age: "{{alter}}" <br/><input [(ngModel)]="alter"> <br/><br/>

              <my-child [(name)]="firstname" [age]="alter" (ageChanged)="alter = $event"></my-child></p>`
})
export class AppComponent { 
    firstname = 'Angular'; 
    alter = "18"; 
}

Composant enfant

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

@Component({
   selector: 'my-child',
   template: `<p>V1 Childvalue Name: "{{name}}"<br/><input [(ngModel)]="name" (keyup)="onNameChanged()"> <br/><br/>
              <p>V2 Childvalue Age: "{{age}}"<br/><input [(ngModel)]="age"  (keyup)="onAgeChanged()"> <br/></p>`
 })
export class ChildComponent { 
     @Input() name : string;
     @Output() nameChange = new EventEmitter<string>();

     @Input() age : string;
     @Output() ageChanged = new EventEmitter<string>();

     public onNameChanged() {
         this.nameChange.emit(this.name);
     }

     public onAgeChanged() {
         this.ageChanged.emit(this.age);
     }
 }
7
squadwuschel