Comment obtenir des nœuds dans Angular2

Dans angulaire2, les fichiers ts prennent en charge le code js. Pourquoi ne puis-je pas obtenir les nœuds d'éléments en utilisant document.getElementById ? En fait, dans angulaire2, le fichier ts est chargé en premier puis la vue, donc le nœud ne peut pas être obtenu. Cet article présente principalement comment obtenir des nœuds dans angulaire2 et présente plusieurs méthodes en détail, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

L'exploitation directe du DOM dans la couche d'application entraînera un couplage fort entre la couche d'application et la couche de rendu, empêchant notre application de s'exécuter dans différents environnements, tels que les travailleurs Web, car dans un environnement de travail Web , il ne peut pas manipuler directement le DOM.

Grâce à ElementRef, nous pouvons encapsuler des éléments natifs dans la couche de vue sous différentes plates-formes (dans un environnement de navigateur, les éléments natifs font généralement référence à des éléments DOM. Enfin, avec l'aide de la puissante fonctionnalité d'injection de dépendances fournie par Angular, nous Vous pouvez facilement accéder aux éléments natifs.

angular2 a un hook de cycle de vie AfterViewInit qui peut nous aider à exécuter le ts correspondant après le chargement de la vue

ts :

import { Component， ElementRef ，AfterViewInit} from '@angular/core';

exportclassAppComponent { 

constructor(privateelementRef: ElementRef) {

 }

ngAfterViewInit() {

  let pEle =this.elementRef.nativeElement.querySelector('p');//获取第一个p

  console.dir(pEle);

  let p = doxcument.getElementById("p");  //获取id为‘p'的节点

}

}

Il existe une solution d'optimisation ci-dessous, utilisant le décorateur d'attributs intégré d'Angular @ViewChild

ts:

import{ Component, ElementRef, ViewChild, AfterViewInit }from'@angular/core';

exportclassAppComponent{

@ViewChild('greet')

 greetp: ElementRef;

ngAfterViewInit() {this.greetp.nativeElement.style.backgroundColor ='red'; }

}

html:

<p #greet>hello world</p>  //element的标识"#name",@ViewChild根据这个搜索元素

Comment obtenir des éléments dom en angulaire

Répartition des étapes :

Première étape : donner l'élément pour obtenir un modèle ng de variables et de liaison d'événements !

Copier le code Le code est le suivant :

//Donnez à l'élément à obtenir une variable ng-model

Étape 2 : Utilisez $event.target dans le contrôleur pour obtenir le élément dom !

$scope.switchImage = function($event, value) { 
      3       $($event.target).on("mouseenter mouseleave",function(e) {
         var w = $(this).width(); // 得到盒子宽度
         var h = $(this).height();// 得到盒子高度
         var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
         // 获取x值
         var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
         // 获取y值
         var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 
　　　　　　　　　　　　//direction的值为“0,1,2,3”分别对应着“上，右，下，左”
         // 将点的坐标对应的弧度值换算成角度度数值
         var dirName = new Array('上方','右侧','下方','左侧');
         if(e.type == 'mouseenter' && direction == 1){
           $(this).find('.profil-photo').html(dirName[direction]+'离开');

　　　　　　　　　　　　}else{ 
 　　　　　　　　　　　　　$(this).find('.profil-photo').html(dirName[direction]+'离开'); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}

Recommandations associées :

Méthode JS pour obtenir les éléments frères, parents et enfants d'une compétence node_javascript

Méthode jQuery pour obtenir le nœud et le sous-nœud text_jquery

jquery obtenant le nom du nœud_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!