ngclass - renderer2 angular 6
¿Cuál es la forma correcta de acceder al elemento nativo en angular2(2 maneras diferentes) los documentos son escasos? (2)
¿Cuál es la forma correcta de acceder al elemento nativo en angular2 (2 maneras diferentes), así que he visto un código que usa:
constructor(ele: ElementRef) {
let myEl = ele.nativeElement;
// do some work on myEl such as jQuery(myEl).hide()
...
Además del código que usa dom nativo a través de BrowserDomAdapter:
constructor(viewContainer:ViewContainerRef) {
let dom = new BrowserDomAdapter();
let el = viewContainer.element.nativeElement;
let myEle = dom.getElementsByClassName(el, element)[0];
// or jQuery(myEle).hide()
...
Me pregunto cuál es el Pro / Contras y la forma "adecuada" de hacer las cosas. Desafortunadamente, los doctores parecen escasos todavía.
Estoy asumiendo que este último le dará soporte a los Trabajadores Web a través de la interfaz, pero es solo mi suposición.
Hay una característica indocumentada (probablemente intencionalmente) para eso. No tiene que lidiar con vistas y con elementos de entrada inyectados.
Además, simplemente dando una
constructor(private e: ElementRef)
Tampoco funcionará, será compilable por la escritura de tipo, pero le dará un error de parámetro en la inicialización del tiempo de ejecución.
Finalmente pude encontrar una solución en solo 3 horas de excavación:
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;
}
}
Como puede ver, el constructor obtendrá el ElementRef solo si ha inyectado el parámetro con una palabra clave @Inject(ElementRef) . Tanto Inject como ElementRef deben importarse desde el núcleo angular.
ElementRef.nativeElement es el nodo DOM de HTML que está buscando. Tienes la oportunidad de atraparlo solo en el constructor, así que no te pierdas la oportunidad.
En la documentación de Angular, intentan convencerte de que no la necesitas, en su dialecto significa que admiten que la necesitas, pero no quieren que la uses.
En versiones angulares anteriores funcionó incluso sin la cosa @Inject , pero afortunadamente el desarrollo Angular siempre nos Provides secretos más nuevos y más recientes en su producto "estable".
Extensión:
Hubo un comentario (actualmente movido a una sala de chat), que dice que la anotación @Inject no es necesaria si tiene emitDecoratorMetadata: true en su tsconfig.json . Mis experiencias contradicen esto, además rompe la pared entre js y ts, pero también es una solución posible. Es posible, que las experiencias del comentarista sean de una semana anterior.
<div #foo>
@ViewChild() foo;
ngAfterViewInit(){
foo.nativeElement...
}
o si se transcluye
@ContentChild() foo;
ngAfterContentInit(){
foo.nativeElement...
}
Permite seleccionar elementos por variable de plantilla o componente o tipo de directiva. (aunque con un tipo obtendrás la instancia del componente en lugar del elemento).
o
constructor(@ViewChildren(''foo'') elements) {...
constructor(@ContentChildren(''foo'') elements) {...
@ViewChild proporciona una vista en vivo de elementos coincidentes con cambios de suscripción.
Ver también