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

Posted 2023-03-13

【中文标题】BrowserDomAdapter 更改没有反映在 angular2 上下文的外部

【英文标题】：BrowserDomAdapter changes are not reflecting in out side of angular2 context

【发布时间】：2016-10-05 22:38:06

【问题描述】：

我正在尝试使用 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.
        );
    );
  

`

【参考方案1】：

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

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

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

【讨论】：

你需要什么zone.runOutsideAngular()for？我在这里无法理解您的代码示例。 this.zone.runOutsideAngular(() => this.zone.run(() => ... ) ); 应该怎么做？对我来说看起来像个麻烦。

我很抱歉造成混乱，我想在这里做什么？我想在 angular2 中使用 JQuery UI 日期选择器。你能建议我更新组件/指令模式的最佳方法吗

jQuery UI 日期选择器与“组件/指令的模态”有什么关系？

假设我有一个学生组件，其中包含以下字段学生姓名、id、dob、性别……字段。对于 DOB，我使用的是 JQuery Ui datepicker。当我选择出生日期时。 student.dob 必须更新。这是我的期望。在 angularJS 中，我将在选择日期时创建一个日期指令。我会做 $scope.$apply。在 angular2 中，我正在寻找类似的功能。很多人说我们可以通过使用 Zone.js 来实现它，但这对我没有帮助。

这与“组件/指令的模态”有什么关系？