कोणीय 2 - घटक चर/घटक वर्ग संपत्ति पर दो तरह से डाटाबेसिंग?

Question

कोणीय 2 (बीटा 6) में मेरे पास मुख्य मेनू के लिए एक घटक है।

<mainmenu></mainmenu> 

मैं व्यापक या संकीर्ण के लिए एक बूलियन बांधना चाहता हूं। तो मैं इसे इस रूप दे दिया:

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

लेकिन क्या मैं चाहता हूँ (मुझे लगता है कि) एक जावास्क्रिप्ट वर्ग संपत्ति के लिए बाध्य करने के लिए (के रूप में मैं अन्य बातों के लिए बाध्य करने के लिए है, लेकिन में एक भी वर्ग का उपयोग करके साफ होने के लिए चाहते हो सकता है है घटक)।

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

हालांकि इस (? एक तरह से बंधन) प्रतीत होता है:

मैं अगर मैं एक वर्ग के बजाय एक ही चर के साथ एक ही मैं कोशिश एक त्रुटि

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

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

मिल काम (लेकिन मैं किसी अन्य घटक से चौड़ा/संकीर्ण जाने के लिए मेनू को ट्रिगर करना चाहता हूं, इसलिए महसूस किया कि यह दो-तरफा डेटा बाध्य संपत्ति होनी चाहिए):

<menu [vis]="true"></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 

} 

यहाँ है मेरी mainmenu देखें मॉडल वर्ग

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

मैं एक मेनू जो माउस और पाठ है बनाने के लिए कोशिश कर रहा हूँ, लेकिन जा सकते हैं सिर्फ आइकन दिखाने के लिए संकीर्ण। मेनू के बगल में कंटेनर की स्थिति को बदलने के लिए मैं इस घटना को एक मूल घटक के ऊपर छोड़ दूंगा। अधिकतम करने के लिए एक सामग्री कंटेनर को ट्रिगर करने से मेनू को संकीर्ण होने के लिए ट्रिगर किया जाएगा - मैं यह नहीं कह रहा कि यह सबसे अच्छा तरीका है, लेकिन मैं गहराई से पहले इस विशेष प्रश्न को हल करना चाहता हूं।

कृपया ध्यान दें: मैं यहां एक इनपुट नियंत्रण के लिए डेटाबेस नहीं कर रहा हूं - बस एक घटक को डाटाबेसिंग कर रहा हूं ताकि मैं यूआई को संशोधित कर सकूं।

यह कोणीय cheatsheet से

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

अग्रिम धन्यवाद है!

अद्यतन

स्वीकार किए जाते हैं जवाब से कोड का घालमेल और यहाँ अंतिम काम कर कोड मेरी विशेष उपयोग के मामले के लिए अनुकूल:

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 (रूट)

export class AppComponent implements OnInit{ 
    menuvisible: Boolean; 
} 

menu.component।ts (रूट के बच्चे)

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> 

आयात करने के लिए आप क्या उदा जरूरत है याद रखें बाध्यकारी Angular 2 Tutorial (2016) - Inputs and Outputs

Answer 1

दो तरह के लिए आप की तरह कुछ की जरूरत है::

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

अति आप ट्यूब पर इस वीडियो की सिफारिश

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

और तरह

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

Answer 2

मैं इसका इस्तेमाल मैंने एक छोटा प्लंकर बनाया है।

ngModel Like Two-Way-Databinding for components

आप घटकों

के लिए एक दो तरह से डेटा बाइंडिंग

V1 बनाने के लिए करने के लिए कम से कम दो संभावनाएं हैं: ngModel तरह सिंटेक्स के साथ, वहाँ आप एक ही नाम लाइन के साथ एक @Output संपत्ति बनाने के लिए @Input संपत्ति + @Output संपत्ति नाम के अंत में "परिवर्तन"

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

V1 आप अब ngModel सिंटेक्स

साथ बाल घटक करने के लिए बाध्य कर सकते हैं साथ 10

[(name)]="firstname" 

वी 2। बस नामकरण आप V2 के साथ

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

पसंद करते हैं तो आपके पास दो गुण दो तरह से डेटा बाइंडिंग प्राप्त करने के लिए बनाने के लिए के साथ एक @Input और @Output संपत्ति बनाने

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

जनक घटक

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

बाल घटक

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