Какой правильный способ доступа к собственному элементу в документах angular2 (2 diff ways) является недостаточным

Каков правильный способ доступа к встроенному элементу в angular2 (2 diff ways) поэтому я видел код, который использует:

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

Как и код, который использует собственный dom через BrowserDomAdapter:

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 через интерфейс, но это просто мое предположение.

Ответы

Ответ 1

<div #foo>

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

или если заключено

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

Разрешить выбор элементов по переменной шаблона или компоненту или типу директивы. (с типом вы получите экземпляр компонента вместо элемента.

или

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

@ViewChild предоставляет живое представление для соответствия элементам с подпиской на изменения.

См. также

Ответ 2

Для этого существует (возможно, намеренно) недокументированная функция. Вам не нужно иметь дело с представлениями и с инъецированными инъекциями.

Кроме того, просто давая a

constructor(private e: ElementRef)

также не будет работать, он будет компилироваться с помощью typescript, но он даст вам ошибку параметра в инициализации среды выполнения.

Наконец, я смог найти решение всего за 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 должны быть импортированы из ядра angular.

ElementRef.nativeElement - это HTML DOM node, что вы ищете. У вас есть шанс поймать его только в конструкторе, поэтому не упустите эту возможность.

В документации angular они пытаются убедить вас, что вам это не нужно, на их диалекте это означает, что они признают, что вам это нужно, но они не хотят, чтобы вы его использовали.

В более ранних версиях angular он работал даже без @Inject, но, к счастью, разработка angular всегда Provides нас более новых и новых секретов в их "стабильном" продукте.

Extension:

Был комментарий (в настоящее время перемещен в чат), он сказал, что аннотация @Inject не нужна, если у вас emitDecoratorMetadata: true в вашем tsconfig.json. Мои опыты противоречат этому, кроме того, он разрушает стену между js и ts, но это также возможное решение. Возможно, что опыт комментатора с предыдущей недели.