Question

我正在尝试使用BrowserDomAdapter更改Angular2上下文之外的文本值，但它工作正常。

但是更改值并未反映在模型/组件/指令上。我实际上是在寻找$在anuglar2中应用类似的功能。我知道我们可以通过使用Zone.js来实现它即使它不起作用。

以下是我的代码段，感谢任何帮助/建议。

`// app组件从'@ angular / core'导入{Component}; 从'./default.directive'导入{DefaultDirective}; @零件（{ 选择器：'my-app'， templateUrl： “./模板/ default.tpl.html” 指令：[DefaultDirective] }） export class AppComponent { color：string =“Red ..”; }

// 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.
        });
    });
  }
}

`

Answer 1

Angular不监控任何DOM更改，不在Angular组件内部或外部。您可能希望在Angular之外发出事件并在Angular中侦听该事件以更新事件处理程序中的模型。

您可以通过在事件名前加上window:或document:

来收听全球事件

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

BrowserDomAdapter更改未反映在angular2上下文的外侧

1 个答案: