在angular2(2个差异方式)文档中访问本机元素的正确方法是什么是稀缺的

Question

什么是在angular2(2 diff方式)中访问本机元素的正确方法,所以我看到使用的代码:

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和"正确"的做事方式.不幸的是,文档似乎仍然很少.

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

Answer 1

<div #foo>

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

或者如果被抄袭

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

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

要么

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

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

也可以看看

• @ViewChild和@ContentChild有什么区别？
• angular 2/typescript:获取模板中的元素