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

추천 도서:

vue의 내장 명령어 사용

React의 Vuex 사용 사례

위 내용은 Angular2를 사용할 때 Dom의 오해를 피하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!