[英]Angular2 Component @Input two way binding
I have a data driven Angular application. 我有一个数据驱动的Angular应用程序。 I have a toggle component which I pass in a toggled state. 我有一个切换组件,我以切换状态传递。 My issue is that the two way data binding does not seem to work unless i pass in the toggle boolean as an object. 我的问题是双向数据绑定似乎不起作用,除非我将toggle布尔值作为对象传递。 Is there a way to get this to work without using an EventEmitter or passing the variable in as an object . 有没有办法让它在不使用EventEmitter或将变量作为对象传递的情况下工作。 This is to be a reusable component and the application is heavily data driven so passing the value in as an object in not an option. 这是一个可重用的组件,应用程序是大量数据驱动的,因此将值作为对象传递给非选项。 My code is.... 我的代码是......
toggle.html toggle.html
<input type="checkbox" [(ngModel)]="toggled" [id]="toggleId" name="check"/>
toggle.component.ts 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 parent.component.html
<toggle-switch toggleId="toggle-1" [(toggled)]="nongenericObject.toggled"></toggle-switch>
For [(toggled)]="..."
to work you need 对于[(toggled)]="..."
你需要工作
@Input() toggled: boolean;
@Output() toggledChange: EventEmitter<boolean> = new EventEmitter<boolean>();
changeValue() {
this.toggled = !(this.toggled);
this.toggledChange.emit(this.toggled);
}
See also Two-way binding 另请参见双向绑定
[UPDATE] - 25 June 2019 [更新] - 2019年6月25日
From @Mitch's comment below: 来自@Mitch的评论如下:
It's worth noting that the @Output
name must be the same as the @Input
name, but with Change
on the end. 值得一提的是, @Output
名称必须相同@Input
名称,但Change
的结束。 You can't call it onToggle
or something. 你无法在onToggle
或其他东西上调用它。 It's a syntax convention. 这是一种语法约定。
Although the question has more than 2 years old I want to contribute my 5 cents... 虽然这个问题已超过2年,但我想贡献5美分......
It isn't a problem about Angular, its about how Javascript works... Simple variables (number, string, boolean, etc) are passed by value whereas complex ones (objects, arrays) are passed by reference: 这不是关于Angular的问题,它关于Javascript如何工作......简单的变量(数字,字符串,布尔值等)通过值传递,而复杂的(对象,数组)通过引用传递:
You can read more about this in Kyle Simpson´s series You dont know js: 你可以在Kyle Simpson的系列中阅读更多关于这个的内容你不知道js:
https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md#value-vs-reference https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md#value-vs-reference
So, you can use an @Input() object variable to share scope between components without need to use emitters, observers and whatever similar. 因此,您可以使用@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"/>
This way you can modify all object properties and you get same value in both components because they share same reference. 这样,您可以修改所有对象属性,并在两个组件中获得相同的值,因为它们共享相同的引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.