Angular2에서 Dom을 사용하는 방법

이번에는 Angular2에서 Dom을 사용하는 방법과 Angular2에서 Dom을 사용할 때 주의사항에 대해 알려드리겠습니다.

머리말

Angular2의 디자인 목표는 브라우저와 DOM을 독립적으로 만드는 것입니다. DOM은 복잡하므로 컴포넌트를 분리하면 애플리케이션을 더 쉽게 테스트하고 리팩토링할 수 있습니다. 크로스 플랫폼을 지원하기 위해 Angular는 추상화를 통해 다양한 플랫폼의 차이점도 캡슐화합니다.

Content

1. 왜 DOM을 직접 조작할 수 없나요?

Angular2는 AOT 정적 컴파일 모드를 채택합니다. 이 형식에서는 템플릿 유형이 안정적이고 안전해야 합니다. 직접 javascript를 사용하고 jquery 언어는 컴파일이 오류를 미리 감지하지 못하기 때문에 불안정하므로, 그런 다음에만 angle2를 선택합니다. javascript의 상위 집합인 typescript 언어(이 언어를 컴파일하는 동안 오류가 발견될 수 있음)

2. DOM을 작동하는 세 가지 잘못된 방법:

@Component({ ... })
export class HeroComponent {
 constructor(private _elementRef: ElementRef) {}
 doBadThings() {
  $('id').click(); //jquery
  this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
  document.getElementById('id'); //javascript
 }
}

3. Angular2는 DOM을 어떻게 작동합니까?

크로스 플랫폼을 지원하기 위해 Angular는 추상화 계층을 통해 다양한 플랫폼의 차이점을 캡슐화합니다. 예를 들어 추상 클래스 Renderer, Renderer2, 추상 클래스 RootRenderer 등이 정의됩니다. 또한 ElementRef, TemplateRef, ViewRef, ComponentRef, ViewContainerRef 등의 참조 유형이 정의됩니다.

4 DOM(ElementRef 및 Renderer2)을 작동하는 올바른 방법:

product.comComponent.html

<p>商品信息</p>
<ul>
 <li *ngFor="let product of dataSource| async as list">
  {{product.title}}
 </li>
</ul>
<p #dia>
</p>

product.comComponent.ts

import { Component, OnInit,Renderer2, ViewChild，ElementRef,AfterViewInit} from '@angular/core';
@Component({
 selector: 'app-product',
 templateUrl: './product.component.html',
 styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit,AfterViewInit {
 @ViewChild('dia') dia:ElementRef ;定义子试图
 ngOnInit() {
 /**1.
 *创建一个文本
 */
  this.dia.nativeElement.innerHTML="这只是一个测试的文档";
 /**2.
  *添加click事件
  */
 let ul=this.element.nativeElement.querySelector('ul');
  this.render2.listen(ul,"click",()=>{
   this.render2.setStyle(ul,"background","blue");
ngAfterViewInit(){
/**3.
 *修改背景颜色
 */
 let li=this.element.nativeElement.querySelector('ul');
 this.render2.setStyle(li,"background","red");
 }
}

Summary

실제로 우리는 언어를 배울 때 먼저 그 사양을 따르고 이전 언어와의 차이점을 인정한 다음 이전 방법과 다른 점과 이유를 깊이 이해해야 합니다. 그렇지 않으면 이 언어의 아름다움을 이해할 수 없기를 바랍니다. 당신에게 도움이 됩니다!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

React에서 Vuex 메서드 사용에 대한 자세한 설명

nodejs 다중 버전 관리 사용에 대한 자세한 설명

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