Question

在Angular 2 RC中操作DOM的正确方法是什么？

例如，我正在构建一个用于调试目的的服务来交换文档中的.css文件引用。

在Angular 2 RC之前，可以使用来自DOM操作的BrowserDomAdapter，如下所示：

import { BrowserDomAdapter } from 'angular2/platform/browser';

...
constructor(private domAdapter: BrowserDomAdapter) {
}
...

const document = this.domAdapter.defaultDoc();

这受到Title服务（现在位于@angular/platform-browser）的启发。似乎Title服务仍然在内部使用它，但它不再导出以供在Angular之外使用。即。

import { BrowserDomAdapter } from "@angular/platform-browser";

结果：

Module '".../@angular/platform-browser/index"' has no exported member 'BrowserDomAdapter'

Answer 1

  import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';

<强>更新：（评语）

issue on GitHub解释说删除确实存在意外，所以希望它会回到rc2。 - @paul

Answer 2

对于像我这样的人，期待在angular 2.4中与DOM进行交互：

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({})
export class MyClass {

    constructor (@Inject(DOCUMENT) private document) { }

    doSomething() {
        this.document.someMethodOfDocument();
    }
}

您不应该使用任何适配器。这是实现细节，不应使用。而是@Inject(DOCUMENT)进入您的组件并使用它。

进一步阅读：https://github.com/angular/angular/issues/8509

在Angular 2 RC中访问DOM

2 个答案: