Angular 2 DOM 适配器答案

【问题标题】：Angular 2 DOM adapterAngular 2 DOM 适配器
【发布时间】：2016-06-18 08:43:40
【问题描述】：

尝试像这样使用 DOM 适配器：

import { DOM } from 'angular2/src/platform/dom/dom_adapter';
DOM.addClass(DOM.query("body"), 'test');

但是报错

原始异常：TypeError：dom_adapter_1.DOM 为 null ...

在生成的代码中 dom_adapter_1.DOM 为空，但 dom_adapter_1.default.DOM 不为空并且工作正常。

(angular2: "2.0.0-beta.8")

为了解决我添加到"angular2/src/platform/dom/dom_adapter.d.ts" 这个函数："export declare function DOM2(): DomAdapter;"，以及在 angular.js 中的简单实现（函数 DOM2(){ return this.default.DOM;}）

现在我像这样使用它：

import { DOM2 } from 'angular2/src/platform/dom/dom_adapter';
DOM2().addClass(DOM2().query("body"), 'test');

【问题讨论】：

你在说BrowswerDomAdapter吗？
是的。谢谢你的回答。

标签： angular typeerror

【解决方案1】：

这是 TypeScript 中 DOM 的一个已知问题https://github.com/angular/angular/issues/6904

【讨论】：

【解决方案2】：

我不完全理解你的问题。但是你可以像这样使用BroswerDomAdapter。（只有对你有帮助）

import {Component} from 'angular2/core';
import {BrowserDomAdapter} from 'angular2/platform/browser';
//import { DOM } from 'angular2/src/platform/dom/dom_adapter';
@Component({
    selector: 'my-app',
    template: `
    <style>
      .test{
        color:green;
      }
    </style>
    <button (click)="add()">Add New Element</button>
    `
})
export class AppComponent {
 dom:BrowserDomAdapter;
  constructor() { 
    this.dom = new BrowserDomAdapter();
  }
  add(){
     this.dom.addClass(this.dom.query("button"),"test");
  }
}

working Demo

【讨论】：

如果与您的问题无关，请告诉我，我现在将其删除。
我认为这是一个很好的解决方法，但 DOM 应该使用适当的专用 DOM 适配器自动初始化为应用程序运行的平台（服务器、客户端、WebWorker）