Angular에서 Dom을 사용할 때 오해를 피하는 방법

이번에는 Angular에서 Dom을 사용할 때 오해를 피하는 방법을 알려드리겠습니다. Angular에서 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");
 }
}

이 사례를 읽으신 후 방법을 마스터하신 것 같습니다. 기사, 더보기 PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 자료:

Vue에 내장된 명령어 사용 요약

FileReader API를 사용하여 Vue 파일 리더를 만드는 방법

페이지 코드 분할 구현 방법 및 켜기 -React

를 사용한 요청 로딩

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