Angular2 - двухсторонняя привязка данных к свойству компонента/компонента класса?

В Angular2 (бета-версия 6) у меня есть компонент для главного меню.

Я хочу привязать логическое значение для широкого или узкого. Поэтому я сделал следующее:

Но то, что я хочу (я думаю), является привязка к свойству класса javascript (поскольку у меня могут быть другие вещи, которые нужно связывать, но вы хотите быть аккуратными, используя один класс в компоненте).

Если я попробую то же самое с одной переменной вместо класса, я получаю:

Однако это (одностороннее связывание?) действительно работает (но я могу захотеть, чтобы меню стало широко/узким от другого компонента, так что это должно быть двухстороннее свойство привязки данных):

Я пытаюсь создать меню, в котором есть значки и текст, но может быть узким, чтобы просто показывать значки. Я передам это событие вверх родительскому компоненту, чтобы изменить положение контейнера рядом с меню. Запуск контейнера содержимого для максимизации приведет к тому, что меню станет узким - я не говорю, что это лучший способ, но я хотел бы решить этот конкретный вопрос, прежде чем идти глубже.

Обратите внимание: я не привязываюсь к входному управлению здесь - просто привязываю к компоненту, поэтому я могу изменить пользовательский интерфейс.

Интеграция кода из принятого ответа и адаптация для моего конкретного случая использования здесь окончательный рабочий код:

Не забудьте импортировать то, что вам нужно, например.

Ответы

Ответ 1

Для двусторонней привязки вам нужно что-то вроде:

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

Ответ 2

Я создал короткий plunkr.

ngModel Как двухсторонняя привязка для компонентов

У вас есть как минимум две возможности создания двухсторонней привязки данных для компонентов

V1: с помощью синтаксиса ngModel Like вам нужно создать свойство @Output с той же строкой имени свойство @Input + "Изменить" в конце имени свойства @Output

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

с V1 теперь вы можете привязываться к дочернему компоненту с синтаксисом ngModel

[(name)]="firstname"

V2. Просто создайте одно свойство @Input и @Output с наименованием, которое вы предпочитаете

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

с V2 вам нужно создать два атрибута, чтобы получить двухстороннюю привязку данных

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