どのようにアングラー2でノードを取得しますか？

私たちはanglar 2でtsファイルがjsコードをサポートしていることを知っていますが、なぜdocument.getElementByIdでエレメントノードを取得できませんでしたか？
実はangglar 2にtsファイルをロードしてからviewをロードしますので、ノードが得られません。
アプリケーション層が直接DOMを操作すると、アプリケーション層とレンダリング層との間の強い結合が起こり、ウェブウォーカーなどの異なる環境でのアプリケーションの実行ができなくなります。
ElementRefによって、異なるプラットフォームの下でレイヤーの中のnative要素（ブラウザ環境では、native要素は通常DOM要素を指す）をカプセル化し、最後にAnglarによって提供される強力な依存注入特性を利用して、簡単にnative要素にアクセスすることができます。
angglar 2ライフサイクルフックがあります。AfterView Initはviewにロードしてから対応するtsを実行してください。
ts:

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

exportclassAppComponent { 

constructor(privateelementRef: ElementRef) {

 }

ngAfterViewInit() {

  let divEle =this.elementRef.nativeElement.querySelector('div');//     div

  console.dir(divEle);

  let div = doxcument.getElementById("div");  //  id ‘div'   

}

}

次の最適化プログラムは、anglar内蔵のプロパティ装飾器@ViewChildを使用しています。
ts:

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

exportclassAppComponent{

@ViewChild('greet')

 greetDiv: ElementRef;

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

}

html数:

<div #greet>hello world</div>  //element   "#name",@ViewChild        

angglarの中でdom元素はどうやって取得しますか？
ステップ分解:
第一歩：取得する要素に対して、ng-model変数を与え、イベントをバインディングします。

<div class="home" ng-model="dirName"  ng-mouseenter="switchImage($event,dirName)"></div>  //         ng-model  

ステップ2：controllerでは、$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]+'  '); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。