javascript - change - router events subscribe angular 4

Angular 2.x seleccionando el elemento DOM

Question

Sé que debería ser fácil, pero angular 2.0 no tiene muchos ejemplos todavía.

En uno de mis componentes, en algún caso necesito agregar clase en mi etiqueta de cuerpo. Pero mi aplicación es bootstrap más profunda que el cuerpo, así que necesito algo como

angular.element(''body'').addClass(''fixed'');

pero en Angular 2.0 ..

Por cierto, sé que de alguna manera puedo arrancar mi aplicación para incluir una etiqueta de body , pero creo que en algunos otros casos necesitaría seleccionar algunos elementos de todos modos, así que necesito una solución para hacer esta tarea simple: seleccionar elemento y agregar clase a eso"

Answer 1

A partir de Angular2 Versión 2.0.0-beta.17.

Las directivas de atributos en Angular2 lo harán muy bien.

Por favor vea este plunk escrito en TypeScript. Esto hace lo que quieras muy bien.

El archivo de directivas my-highlight.ts tiene la línea:

this.renderer.setElementClass(this.element, "red", true);

Esto establece la clase CSS en el elemento.

Mientras template.html tiene el elemento real que está decorado con la directiva [myHighlight] :

<p [myHighlight]>Mouseover to highlight me!</p>

Esto, para mí, proporciona la respuesta menos complicada a la pregunta sin ninguna dependencia de jqLite.

Answer 2

A partir del angular 2.4 , debe inyectar el DOCUMENT y no interactuar con ningún adaptador:

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();
}
}

Lectura adicional: https://github.com/angular/angular/issues/8509

Answer 3

No recomiendo el acceso directo a DOM desde Angular, pero tiene un enlace DOM a través del ElementRef de su componente. Una vez que tenga acceso a él, puede usarlo directamente o mediante jQuery o cualquier otra técnica de manipulación DOM. He incluido un ejemplo de cómo usar jquery para ejecutar consultas generales. Si siempre va por la etiqueta del cuerpo, realmente no necesita ElementRef, pero es útil para algo que está relacionado con la raíz del componente.

import {Component, ElementRef, OnInit} from ''@angular/core'';
declare var jQuery:any;
@Component({
selector: ''jquery-integration'',
templateUrl: ''./components/jquery-integration/jquery-integration.html''
})
export class JqueryIntegration implements OnInit {
elementRef: ElementRef;
constructor(private elementRef: ElementRef) {
}
ngOnInit() {
jQuery(this.elementRef.nativeElement).find(''.moving-box'').draggable({containment:''#draggable-parent''});
}
}

Más información aquí: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

Demostración: http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery

Answer 4

Actualizar

No estoy seguro de si DOM todavía es compatible con RC. Las declaraciones relacionadas no son muy claras. Algo como

DOM es sólo para uso interno. Acceda directamente al DOM o utilice un renderizador personalizado.

No he visto cómo se podría implementar un renderizador personalizado o cómo proporcionar una implementación en función de la plataforma actual (trabajador web, servidor, subproceso DOM).

Actualizar Esta parece ser la forma Angular2

import { DOM } from ''angular2/src/platform/dom/dom_adapter'';
DOM.addClass(DOM.query("body"), ''fixed'');

Importar desde .../src/... bajo su propio riesgo. .../src/... se considera implementación privada y no puede esperar ninguna garantía de que la API no cambie sin previo aviso.

Lo probé en Dart y funciona bien (aunque no estoy seguro de que la importación de TS sea correcta). En Dart DOM se exporta por package:angular2/angular2.dart

Original

Si desea acceder a un elemento DOM que está fuera de la raíz de su aplicación Angular, simplemente use document.querySelector() , no es necesario que participe de Angular.

Answer 5

Manipulación de DOM en la aplicación Angular 2/4

Para manipular el DOM en aplicaciones Angular 2/4, necesitamos implement el método ngAfterViewInit() de AfterViewInit . Se ngAfterViewInit() método ngAfterViewInit() cuando se comprueban los enlaces de las directivas ngAfterViewInit() por primera vez. En otras palabras, cuando la vista se renderiza inicialmente.

El @ViewChild proporciona acceso a nativeElement . Se recomienda no acceder a nativeElement dentro de ngAfterViewInit() porque no es seguro para el navegador. Además, no es compatible con los trabajadores web. Los trabajadores web nunca sabrán cuándo se actualiza el DOM.

La forma correcta es utilizar el renderer . El renderizador necesita ser inyectado al constructor de componentes. Necesitamos proporcionar una referencia de id al elemento HTML en la vista algo como esto:

<p #p1></p>

Se accederá por el correspondiente archivo .ts .ts , algo como esto:

export class SampleComponent implements AfterViewInit {
@ViewChild("p1") p1;
constructor(private renderer: Renderer2) //Renderer set to be depreciated soon
{ }
ngAfterViewInit() {
//recommended DOM manipulation approach
this.renderer.setStyle(this.p1.nativeElement, //setElementStyle for soon to be depreciate Renderer
''color'',
''red'');
//not recommended DOM manipulation approach
//this.p1.nativeElement.style = "color:blue;";
}
}