Angular2에서 Dom을 사용할 때 주의할 점은 무엇인가요?

이번에는 Angular2에서 Dom을 사용할 때 주의사항을 알려드리겠습니다. Angular2에서 Dom을 사용할 때 주의사항은 무엇인가요?

머리말

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

Content

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

Angular2는 AOT 정적 컴파일 모드를 채택합니다. 이 형식에서는 템플릿 유형이 안정적이고 안전해야 합니다. javascript 및 jquery 언어를 직접 사용하는 것은 컴파일이 오류를 미리 감지하지 않기 때문에 불안정합니다. 따라서 angle2는 다음과 같은 TypeScript 언어를 선택합니다. JavaScript의 상위 집합(이 언어는 컴파일 중에 오류를 감지할 수 있음)

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

AngularJS를 처음부터 사용하여 애플리케이션 모듈화 구현

vue를 사용하여 단일 페이지 애플리케이션 프런트 엔드 라우팅을 만드는 방법

위 내용은 Angular2에서 Dom을 사용할 때 주의할 점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!