Angular2 - dwukierunkowe wiązanie danych we właściwości klasy komponentów/komponentów?

Question

W Angular2 (Beta 6) Mam komponent do menu głównego.

<mainmenu></mainmenu> 

Chcę powiązać wartość logiczną dla szerokiego lub wąskiego. Więc zrobiłem to w ten sposób:

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

Ale co chcę (chyba) jest do wiązania się z javascript właściwości klasy (jak może mam inne rzeczy do wiążą, ale chcą być uporządkowane przy użyciu pojedynczej klasy w składnik).

pojawia się błąd

EXCEPTION: Template parse errors: Invalid property name 'menumodel.visible' ("

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

Gdy próbuję samo z pojedynczej zmiennej zamiast klasy I otrzymujemy:

Template parse errors: Parser Error: Unexpected token '='

Jednak to (? Jeden wiążący sposób) wydaje się działa (ale mógłbym chcieć wyzwolić menu, aby przejść szerokie/zwężone z innego komponentu, więc czułem, że powinna to być właściwość dwukierunkowa związana z danymi):

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

To trochę mojego składnik 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 

} 

Oto moja klasa mainmenu Widok Model

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

Próbuję utworzyć menu, które ma ikony i tekst, ale może pójść wąskie, aby pokazać ikony. Wyślę to wydarzenie w górę do elementu nadrzędnego, aby zmienić pozycję pojemnika obok menu. Wyzwalanie kontenera treści w celu zmaksymalizowania spowoduje zmniejszenie menu - nie twierdzę, że jest to najlepszy sposób, ale chciałbym rozwiązać to konkretne pytanie, zanim podejdę głębiej.

Uwaga: nie używam tu danych do kontroli danych wejściowych - wystarczy, że zapisuję dane w komponencie, aby móc zmodyfikować interfejs użytkownika.

To z Kątowymi Cheatsheet

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

Z góry dzięki!

UPDATE

Integracja kod z przyjętą odpowiedzi i dostosowania do mojego konkretnego przypadku użycia tutaj ostateczny kod roboczy:

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 (dziecko korzenia)

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> 

Pamiętaj, aby importować, co trzeba na przykład

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

Gorąco polecam ten film na You Tube: Angular 2 Tutorial (2016) - Inputs and Outputs

Answer 1

dwukierunkowych wiązania trzeba coś takiego:

@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); 
    // } 
} 

i używać go jak

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

Answer 2

I Stworzyłem krótki plunkr.

ngModel Like Two-Way-Databinding for components

mieć co najmniej dwie możliwości do stworzenia dwóch sposób wiązania z danymi dla komponentów

V1: Z ngModel Ci się składni, nie trzeba utworzyć właściwość @Output z tej samej linii nazwa @Input nieruchomości + „zmiana” na końcu nazwy właściwości @Output

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

V1 można teraz wiązania komponentu dziecka z ngModel Składnia

[(name)]="firstname" 

V2. Wystarczy utworzyć jedną właściwość @Input i @Output z nazywania wolisz

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

z V2 trzeba utworzyć dwa atrybuty, aby uzyskać dwukierunkowy Databinding

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

Komponent nadrzędna

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

Komponent potomny

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