Question

访问angular2中的原生元素的正确方法是什么（2种差异方式）所以我看到了使用的代码：

constructor(ele: ElementRef) {
    let myEl = ele.nativeElement;
    // do some work on myEl such as jQuery(myEl).hide()
    ...

以及通过BrowserDomAdapter使用本机dom的代码：

constructor(viewContainer:ViewContainerRef) {
   let dom = new BrowserDomAdapter();
   let el = viewContainer.element.nativeElement; 
   let myEle = dom.getElementsByClassName(el, element)[0];
   // or jQuery(myEle).hide()
   ...

我想知道Pro / Cons和＆＃34;是什么＆＃34;做事的方式。不幸的是，文档似乎仍然很少。

我假设后者会通过界面给你WebWorkers支持，但这只是我的假设。

Answer 1

<div #foo>

@ViewChild() foo;
ngAfterViewInit(){
  foo.nativeElement...
}

或如果被转换

@ContentChild() foo;
ngAfterContentInit(){
  foo.nativeElement...
}

允许按模板变量或组件或指令类型选择元素。（使用类型，您将获得组件实例而不是元素。

或

constructor(@ViewChildren('foo') elements) {...  
constructor(@ContentChildren('foo') elements) {...

@ViewChild提供了匹配更改订阅的元素的实时视图。

另见

Answer 2

有一个（可能是故意的）未记录的功能。您不必处理意见和注入的内容。

此外，只需给出一个

constructor(private e: ElementRef)

也不起作用，它可以通过打字稿编译，但它会在运行时初始化时给你一个参数错误。

最后，我可以在3小时的挖掘中找到解决方案：

import { Component, Directive, ElementRef, Inject } from "@angular/core";

@Component({
    selector: "my-selector",
    template: "my-template"
})
export class MyComponent {
    private domNode: HTMLElement = null;
    constructor( @Inject(ElementRef) elementRef: ElementRef) {
        this.domNode = elementRef.nativeElement;
    }
}

如您所见，当且仅当您使用ElementRef关键字注入参数时，构造函数才会获得@Inject(ElementRef)。应从角度核心导入Inject和ElementRef。

ElementRef.nativeElement是您正在寻找的HTML DOM节点。你有机会只在构造函数中捕获它，所以千万不要错过机会。

在Angular文档中，他们试图说服你不需要它，在他们的方言中，这意味着他们承认你需要它，但他们不希望你使用它。

在早期的角度版本中，它甚至没有@Inject的功能，但幸运的是，Angular开发始终Provides我们在其他“稳定”产品中提供了更新和更新的秘密。

扩展：

有评论（目前已进入聊天室），它表示如果emitDecoratorMetadata: true中有tsconfig.json，则不需要@Inject注释。我的经历与此相矛盾，而且它打破了js和ts之间的隔阂，但它也是一种可能的解决方案。评论者的经历可能来自前一周。

在angular2（2 diff way）docs中访问native元素的正确方法是什么，这是很少的

2 个答案: