angular-Angular2组件@Input双向绑定

我有一个数据驱动的Angular应用程序。 我有一个切换组件,该组件在切换状态下传递。 我的问题是,除非我将toggle布尔值作为对象传递,否则双向数据绑定似乎不起作用。 有没有一种方法可以使它工作而无需使用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>
2个解决方案
70 votes

[(toggled)]="..."工作需要

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

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

另请参阅双向绑定

[更新]-2019年6月25日
来自@Mitch的评论:
值得注意的是@Output名称必须与@Input名称相同,但末尾必须带有Change。 您不能将其称为onToggle之类。 这是一种语法约定。

Günter Zöchbauer answered 2020-08-08T16:28:39Z
3 votes

尽管问题已经超过2岁,但我还是想捐5美分。

这不是关于Angular的问题,而是关于Javascript的工作原理...简单变量(数字,字符串,布尔值等)通过值传递,而复杂变量(对象,数组)通过引用传递:

您可以在Kyle Simpson的系列文章中了解有关此内容的更多信息。

[HTTPS://GitHub.com/个体发育/you-don't-know-JS/blob/master/types%20%26%20grammar/吃2.面对#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"/>

这样,您可以修改所有对象属性,并且在两个组件中获得相同的值,因为它们共享相同的引用。

manguiti answered 2020-08-08T16:29:23Z
translate from https://stackoverflow.com:/questions/42006770/angular2-component-input-two-way-binding