BrowserDomAdapter 更改没有反映在 angular2 上下文的外部

Question

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

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

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

` //应用组件 从“@angular/core”导入{组件}； 从'./default.directive'导入{DefaultDirective}； @零件（{ 选择器：'我的应用'， templateUrl:"./templates/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.
        });
    });
  }
}

`

Answer 1

Angular 不会监控任何 DOM 变化，无论是在 Angular 组件内部还是外部。您可能希望在 Angular 外部发出一个事件并在 Angular 内部监听该事件以更新事件处理程序中的模型。

您可以通过在事件名称前加上window: 或document: 来监听全局事件

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