Angular2 구성요소 @입력 양방향 바인딩

Angular2 구성요소 @입력 양방향 바인딩

데이터 구동 Angular 애플리케이션이 있습니다.토글 상태로 통과하는 토글 부품이 있습니다.문제는 토글 부울을 객체로 전달하지 않으면 양방향 데이터 바인딩이 작동하지 않는 것 같습니다.EventEmitter를 사용하거나 변수를 개체로 전달하지 않고 이 작업을 수행할 수 있는 방법이 있습니까?이는 재사용 가능한 구성 요소이며 애플리케이션은 데이터 구동이 심하므로 옵션이 아닌 개체로 값을 전달합니다.내 코드는..

토글토글

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

}

상위.구성요소.구성요소

<toggle-switch toggleId="toggle-1" [(toggled)]="nongenericObject.toggled"></toggle-switch>

위해서[(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뭐 그런 거.구문 규칙입니다.

비록 문제가 2년이 넘었지만 나는 나의 5센트를 기부하고 싶습니다.

앵글의 문제가 아니라 자바스크립트가 어떻게 작동하는지에 대한 문제입니다.단순 변수(숫자, 문자열, 부울 등)는 값으로 전달되고 복합 변수(개체, 배열)는 참조로 전달됩니다.

카일 심슨의 '당신은 알지 못합니다 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"/>

이렇게 하면 모든 개체 속성을 수정할 수 있으며 두 구성 요소가 동일한 참조를 공유하므로 두 구성 요소에서 동일한 값을 얻을 수 있습니다.

언급URL : https://stackoverflow.com/questions/42006770/angular2-component-input-two-way-binding