web-dev-qa-db-fra.com

Angular 2.x sélection de l'élément DOM

Je sais que cela devrait être facile mais angular 2.0 n'a pas encore beaucoup d'exemples ..

Dans l'un de mes composants, dans certains cas, j'ai besoin d'ajouter de la classe sur ma balise body. Mais mon application est amorcée plus profondément que le corps, j'ai donc besoin de quelque chose comme

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

mais dans Angular 2.0 ..

BTW, je sais que je peux en quelque sorte bootstrap mon application pour inclure la balise body, mais je pense que dans certains autres cas, je devrais sélectionner certains éléments de toute façon, j'ai donc besoin d'une solution comment faire cette tâche simple - "sélectionner un élément et lui ajouter une classe"

javascriptangulartypescript
20
Arūnas Smaliukas

Mise à jour

Je ne sais pas si DOM est réellement toujours pris en charge dans RC. Les déclarations connexes ne sont pas très claires. Quelque chose comme

DOM est uniquement destiné à un usage interne. Accédez directement au DOM ou utilisez un moteur de rendu personnalisé.

Je n'ai pas vu comment un rendu personnalisé pourrait être implémenté ou comment fournir une implémentation en fonction de la plate-forme actuelle (webworker, serveur, thread DOM).

Mise à jour Cela semble être la méthode Angular2

import { DOM } from 'angular2/src/platform/dom/dom_adapter';

DOM.addClass(DOM.query("body"), 'fixed');

Importez depuis .../src/... À vos risques et périls. .../src/... Est considéré comme une implémentation privée et vous ne pouvez vous attendre à aucune garantie que l'API ne changera pas sans préavis.

Je l'ai essayé dans Dart et cela fonctionne bien (je ne sais pas si l'importation TS ci-dessus est correcte cependant). Dans Dart DOM est exporté par package:angular2/angular2.Dart

Original

Si vous voulez accéder à un élément DOM qui est en dehors de votre racine d'application Angular, utilisez simplement document.querySelector() , pas besoin d'impliquer Angular.

13
Günter Zöchbauer

Depuis Angular2 version 2.0.0-beta.17.

Directives d'attribut dans Angular2 le fera bien pour vous.

Veuillez voir ceci plunk écrit en TypeScript. Cela fait bien ce que vous voulez.

Le fichier de directives my-highlight.ts a la ligne:

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

Cela définit la classe CSS sur l'élément.

Tandis que template.html a l'élément réel qui est décoré avec la directive [myHighlight]:

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

Cela, pour moi, fournit la réponse la moins hack-ish à la question sans aucune dépendance à jqLite.

9
JDTLH9

À partir du angular 2.4 vous devez injecter le DOCUMENT et n'interagir avec aucun adaptateur:

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

Pour en savoir plus: https://github.com/angular/angular/issues/8509

6
Stefan Rein

Manipulation DOM dans Angular 2/4 app

Pour manipuler le DOM dans Angular 2/4 applications, nous devons implement la méthode ngAfterViewInit() de AfterViewInit. La méthode ngAfterViewInit() est appelée lorsque les liaisons des directives enfants ont été vérifiées pour la première fois. En d'autres termes, quand la vue est initialement rendue.

Le @ViewChild Donne accès à nativeElement. Il est recommandé de ne pas accéder à nativeElement à l'intérieur de la ngAfterViewInit() car elle n'est pas sécurisée par le navigateur. En outre, il n'est pas pris en charge par les travailleurs Web. Les travailleurs Web ne sauront jamais quand le DOM sera mis à jour.

La bonne façon est d'utiliser renderer. Le moteur de rendu doit être injecté dans le constructeur du composant. Nous devons fournir une référence id à l'élément HTML sur la vue quelque chose comme ceci:

<p #p1></p>

Il sera accessible par le fichier coponent .ts Correspondant, quelque chose comme ceci:


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;";
  }

}
3
student

Je ne recommande pas l'accès direct au DOM depuis Angular, mais vous avez un hook DOM via le ElementRef de votre composant. Une fois que vous y avez accès, vous pouvez l'utiliser directement ou via jquery ou toute autre technique de manipulation DOM. J'ai inclus un exemple d'utilisation de jquery pour exécuter des requêtes générales. Si vous optez toujours pour la balise body, vous n'avez pas vraiment besoin d'ElementRef, mais c'est utile pour quelque chose qui est relatif à la racine du composant.

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

Plus d'informations ici: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.

Démo: http://www.syntaxsuccess.com/angular-2-samples/#/demo/jquery

1
TGH