[ngDefaultControl]
타사 컨트롤을 사용하려면 ControlValueAccessor각도 형식으로 작동 해야 합니다. Polymer와 같이 그들 중 다수는 기본 요소 <paper-input>처럼 작동 <input>하므로 DefaultValueAccessor. ngDefaultControl속성을 추가하면 해당 지시문을 사용할 수 있습니다.
<paper-input ngDefaultControl [(ngModel)]="value>
또는
<paper-input ngDefaultControl formControlName="name">
그래서 이것이이 attrubute가 소개 된 주된 이유입니다.
angular2의 알파 버전에서는ng-default-control 속성 이라고 합니다 .
그래서 ngDefaultControl에 대한 선택기 중 하나입니다 DefaultValueAccessor의 지시어는 :
@Directive({
selector:
'input:not([type=checkbox])[formControlName],
textarea[formControlName],
input:not([type=checkbox])[formControl],
textarea[formControl],
input:not([type=checkbox])[ngModel],
textarea[ngModel],
[ngDefaultControl]', <------------------------------- this selector
...
})
export class DefaultValueAccessor implements ControlValueAccessor {
무슨 뜻인가요?
이는 자체 값 접근자가없는 요소 (예 : 폴리머 구성 요소)에이 속성을 적용 할 수 있음을 의미합니다. 따라서이 요소는 동작을 DefaultValueAccessor취하고이 요소를 각도 형태로 사용할 수 있습니다.
그렇지 않으면 자체 구현을 제공해야합니다. ControlValueAccessor
ControlValueAccessor
Angular 문서 상태
ControlValueAccessor는 Angular 양식 API와 DOM의 기본 요소 사이의 다리 역할을합니다.
간단한 angular2 애플리케이션에서 다음 템플릿을 작성해 보겠습니다.
<input type="text" [(ngModel)]="userName">
input위의 동작 방식을 이해하려면 이 요소에 어떤 지시문이 적용되는지 알아야합니다. 여기서 angular는 오류에 대한 힌트를 제공합니다.
처리되지 않은 약속 거부 : 템플릿 구문 분석 오류 : '입력'의 알려진 속성이 아니므로 'ngModel'에 바인딩 할 수 없습니다.
좋아요, 우리는 SO를 열고 답을 얻을 수 있습니다 : import FormsModuleto your @NgModule:
@NgModule({
imports: [
...,
FormsModule
]
})
export AppModule {}
우리는 그것을 가져 왔고 모든 것이 의도 한대로 작동합니다. 하지만 내부에서 무슨 일이 일어나고 있습니까?
FormsModule 은 다음 지시문을 내 보냅니다.
@NgModule({
...
exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
})
export class FormsModule {}
몇 가지 조사를 통해 세 가지 지침이 우리의 input
1) NgControlStatus
@Directive({
selector: '[formControlName],[ngModel],[formControl]',
...
})
export class NgControlStatus extends AbstractControlStatus {
...
}
2) NgModel
@Directive({
selector: '[ngModel]:not([formControlName]):not([formControl])',
providers: [formControlBinding],
exportAs: 'ngModel'
})
export class NgModel extends NgControl implements OnChanges,
3) DEFAULT_VALUE_ACCESSOR
@Directive({
selector:
`input:not([type=checkbox])[formControlName],
textarea[formControlName],
input:not([type=checkbox])formControl],
textarea[formControl],
input:not([type=checkbox])[ngModel],
textarea[ngModel],[ngDefaultControl]',
,,,
})
export class DefaultValueAccessor implements ControlValueAccessor {
NgControlStatus지시어 단지를 조작 클래스는 좋아 ng-valid, ng-touched, ng-dirty우리는 여기를 생략 할 수 있습니다.
DefaultValueAccesstor제공 NG_VALUE_ACCESSOR업체 배열에 토큰 :
export const DEFAULT_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DefaultValueAccessor),
multi: true
};
...
@Directive({
...
providers: [DEFAULT_VALUE_ACCESSOR]
})
export class DefaultValueAccessor implements ControlValueAccessor {
NgModel지시문은 NG_VALUE_ACCESSOR동일한 호스트 요소에 선언 된 생성자 토큰에 삽입됩니다 .
export NgModel extends NgControl implements OnChanges, OnDestroy {
constructor(...
@Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]) {
우리의 경우 NgModel에는 DefaultValueAccessor. 이제 NgModel 지시문이 공유 setUpControl함수를 호출 합니다.
export function setUpControl(control: FormControl, dir: NgControl): void {
if (!control) _throwError(dir, 'Cannot find control with');
if (!dir.valueAccessor) _throwError(dir, 'No value accessor for form control with');
control.validator = Validators.compose([control.validator !, dir.validator]);
control.asyncValidator = Validators.composeAsync([control.asyncValidator !, dir.asyncValidator]);
dir.valueAccessor !.writeValue(control.value);
setUpViewChangePipeline(control, dir);
setUpModelChangePipeline(control, dir);
...
}
function setUpViewChangePipeline(control: FormControl, dir: NgControl): void
{
dir.valueAccessor !.registerOnChange((newValue: any) => {
control._pendingValue = newValue;
control._pendingDirty = true;
if (control.updateOn === 'change') updateControl(control, dir);
});
}
function setUpModelChangePipeline(control: FormControl, dir: NgControl): void {
control.registerOnChange((newValue: any, emitModelEvent: boolean) => {
// control -> view
dir.valueAccessor !.writeValue(newValue);
// control -> ngModel
if (emitModelEvent) dir.viewToModelUpdate(newValue);
});
}
그리고 작동중인 다리는 다음과 같습니다.
NgModel컨트롤 (1)을 설정하고 dir.valueAccessor !.registerOnChange메서드를 호출 합니다. (2) 속성에 ControlValueAccessor콜백을 저장 하고 이벤트가 발생할 때이 콜백을 실행 합니다 (3) . 마지막으로 함수는 콜백 내부에서 호출됩니다. (4)onChangeinputupdateControl
function updateControl(control: FormControl, dir: NgControl): void {
dir.viewToModelUpdate(control._pendingValue);
if (control._pendingDirty) control.markAsDirty();
control.setValue(control._pendingValue, {emitModelToViewChange: false});
}
각도 호출은 API를 형성합니다 control.setValue.
작동 방식의 짧은 버전입니다.
@Input() ngModel와@Output() ngModelChange결합 양방향과 나는 충분히 다리해야한다 생각했다. 이것은 완전히 다른 방식으로 같은 일을하는 것처럼 보입니다. 내 분야에 이름을 붙이면 안ngModel될까요?