Angle2에서 노드를 얻는 방법-JS 튜토리얼-php.cn

Angle2에서 노드를 얻는 방법

小云云

풀어 주다： 2017-12-18 13:23:16

원래의

2572명이 탐색했습니다.

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

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

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

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

ts:

import { Component， ElementRef ，AfterViewInit} from &#39;@angular/core&#39;;

exportclassAppComponent { 

constructor(privateelementRef: ElementRef) {

 }

ngAfterViewInit() {

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

  console.dir(pEle);

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

}

}

로그인 후 복사

다음은 Angle의 내장 속성 데코레이터 @ViewChild를 사용하는 최적화 솔루션입니다.

ts:

import{ Component, ElementRef, ViewChild, AfterViewInit }from&#39;@angular/core&#39;;

exportclassAppComponent{

@ViewChild(&#39;greet&#39;)

 greetp: ElementRef;

ngAfterViewInit() {this.greetp.nativeElement.style.backgroundColor =&#39;red&#39;; }

}

로그인 후 복사

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(&#39;上方&#39;,&#39;右侧&#39;,&#39;下方&#39;,&#39;左侧&#39;);
         if(e.type == &#39;mouseenter&#39; && direction == 1){
           $(this).find(&#39;.profil-photo&#39;).html(dirName[direction]+&#39;离开&#39;);

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

로그인 후 복사