Angle2에서 노드를 얻는 방법

Angular2에서 ts 파일은 js 코드를 지원합니다. document.getElementById를 사용하여 요소 노드를 가져올 수 없는 이유는 무엇입니까? 실제로 Angle2에서는 ts 파일이 먼저 로드된 후 뷰가 로드되므로 노드를 얻을 수 없습니다. 이 글은 주로Angular2에서 노드를 얻는 방법을 소개하고, 관심 있는 친구들이 참고할 수 있는 몇 가지 방법을 자세히 소개합니다.

애플리케이션 계층에서 DOM을 직접 작동하면 애플리케이션 계층과 렌더링 계층 사이에 강한 결합이 발생하여 웹 워커와 같은 다른 환경에서 애플리케이션을 실행할 수 없게 됩니다. 왜냐하면 웹 워커 환경에서는 DOM이 작동하지 않기 때문입니다. 직접적으로 조작할 수 있습니다.

ElementRef를 통해 다양한 플랫폼의 뷰 레이어에 있는 기본 요소를 캡슐화할 수 있습니다(브라우저 환경에서 기본 요소는 일반적으로 DOM 요소를 참조함). 마지막으로 Angular에서 제공하는 강력한 종속성 주입 기능을 사용하여 쉽게 다음을 수행할 수 있습니다. 기본 요소에 액세스합니다.

angular2에는 뷰가 로드된 후 해당 TS를 실행하는 데 도움이 되는 수명 주기 후크 AfterViewInit이 있습니다.

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'的节点

}

}

다음은 Angle의 내장 속성 데코레이터 @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根据这个搜索元素

Angular에서 DOM 요소를 얻는 방법

단계 분석:

1단계: 얻을 요소에 ng 모델 변수를 제공하고 바인딩 이벤트!

코드 복사 코드는 다음과 같습니다.

2단계: 컨트롤러에서 $event.target을 사용하여 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]+'离开'); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}

관련 권장 사항:

node_javascript 기술의 형제, 부모 및 하위 요소를 가져오는 JS 방법

j노드 및 하위 노드의 텍스트를 가져오는 쿼리 메서드_jquery

jquery get 노드 이름_jquery

위 내용은 Angle2에서 노드를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!