고급 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.

크로스 플랫폼을 지원하기 위해 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");
 }
}

요약

사실, 언어를 배울 때 우리는 먼저 그 사양을 따르고 이전 언어와 차이점을 인정한 다음 이전 언어와 다른 점과 왜 이렇게 하는지 깊이 이해해야 합니다. 그렇지 않으면 이해할 수 없습니다. 이 언어가 도움이 되기를 바랍니다.

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