2016-06-06 11 views
0

BrowserDomAdapter를 사용하여 Angular2 컨텍스트 외부에서 텍스트 값을 변경하려고하는데 정상적으로 작동합니다.BrowserDomAdapter 변경 사항이 angular2 컨텍스트 외부에 반영되지 않습니다.

그러나 변경 값은 모델/구성 요소/지시문에 반영되지 않습니다. 나는 anuglar2에서 비슷한 종류의 기능을 실제로 적용하려고합니다. Zone.js를 사용하여 달성 할 수 있음을 알게되었습니다 심지어 작동하지 않습니다.

다음은 제 코드입니다. 어떤 도움이나 제안도 부탁드립니다.

`// 앱 구성 요소 가져 오기 {Component} '@ angular/core'에서 가져 오기; {DefaultDirective}에서 './default.directive'가져 오기; @Component ({ 선택 : '내-응용 프로그램', templateUrl : "./ 템플릿/default.tpl.html" 지침 : [DefaultDirective] }) 수출 클래스 AppComponent { 색상 : 문자열 = "레드 .. ";

// default.tpl.html 
<div> 
    ===>{{color}} 
    <input type="text" [(ngModel)]="color" [defaultColor]="color"/> 
</div> 

import { Directive, ElementRef, Input, NgZone } from '@angular/core'; 
import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter'; 
@Directive({ 
    selector: '[defaultColor]', 
}) 
export class DefaultDirective { 
    private el: HTMLElement; 
    dom:BrowserDomAdapter; 
    constructor(el: ElementRef,public zone:NgZone) { 
    this.el = el.nativeElement; 
    this.dom = new BrowserDomAdapter(); 
    } 
    ngOnInit() { 
    this.zone.runOutsideAngular(()=>{ 
     this.zone.run(()=>{ 
     this.dom.setValue(this.el,"Adding some content fro ngOnInit"); 
     // I am changing value of a text field out side of angular context. 
     // Value is updating but model is not reflecting 
     //Here i can use @Input/@Output but I would like to change it in out side of angular context. 
     }); 
    }); 
    } 
} 
}

`

답변

0

각도가없는 모니터 모든 DOM 변경하지 각도 부품의 내부 나 외부한다. Angular 밖에서 이벤트를 내보내고 해당 이벤트를 Angular로 들어보고 이벤트 처리기에서 모델을 업데이트하려고 할 수 있습니다.

당신은 zone.runOutsideAngular 여기에 작동하지 않습니다되어 window: 또는 document:

@HostListener('window:mytextupdate', ['$event']) 
_onTextUpdate(event) { 
    this.text = event.detail; 
} 
+0

와 이벤트 이름을 앞에 붙여 글로벌 이벤트를 수신 할 수 있습니까? –

+0

'zone.runOutsideAngular()'에 무엇이 필요합니까? 나는 당신의 코드 예제를 많이 이해할 수 없다. 'this.zone.runOutsideAngular (() => {this.zone.run()) => {...})});'do? 나에게 멍청한 것 같아. –

+0

혼란에 대한 사과, 내가 여기서하려고하는 것은 무엇인가? 각도 2에서 JQuery UI 날짜 선택 도구를 사용하고 싶습니다. 구성 요소/지시문의 모달을 업데이트하는 가장 좋은 방법을 제안 해 줄 수 있습니까? –