Angular2 Компонент @Ввод двухсторонней привязки

У меня есть приложение с приводом данных Angular. У меня есть компонент переключения, который я передаю в переключение. Моя проблема в том, что двухсторонняя привязка данных не работает, если я не перехожу в toggle boolean как объект. Есть ли способ заставить это работать без использования EventEmitter или передачи переменной в качестве объекта. Это должно быть повторно используемым компонентом, и приложение сильно управляется данными, поэтому передача значения в качестве объекта не является вариантом. Мой код...

toggle.html

<input type="checkbox" [(ngModel)]="toggled" [id]="toggleId" name="check"/>

toggle.component.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>

Ответы

Ответ 1

Для работы [(toggled)]="..." вам нужно

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

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

См. также Двустороннее связывание

[ОБНОВЛЕНИЕ] - 25 июня 2019 года
Из комментария @Mitch ниже:
Стоит отметить, что имя @Output должно совпадать с именем @Input, но с Change в конце. Вы не можете назвать это onToggle или как-то еще. Это синтаксическое соглашение.

Ответ 2

Хотя этому вопросу уже более 2 лет, я хочу внести свои 5 центов...

Это не проблема Angular, а то, как работает Javascript... Простые переменные (число, строка, логическое значение и т.д.) Передаются по значению, тогда как сложные (объекты, массивы) передаются по ссылке:

Вы можете прочитать больше об этом в серии Кайла Симпсона. Вы не знаете js:

https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md#value-vs-reference

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

// In toggle component you define your Input as an config object
@Input() vm: Object = {};

// In the Component that uses toggle componet you pass an object where you define all needed needed variables as properties from that object:
config: Object = {
    model: 'whateverValue',
    id: 'whateverId'
};

<input type="checkbox" [vm]="config" name="check"/>

Таким образом, вы можете изменить все свойства объекта и получить одинаковое значение в обоих компонентах, потому что они имеют одну и ту же ссылку.