집 >웹 프론트엔드 >JS 튜토리얼 >Angular4에서 ElementRef를 사용하는 방법

Angular4에서 ElementRef를 사용하는 방법

php中世界最好的语言원래의: 2018-04-12 16:22:564865검색

이번에는 Angular4에서 ElementRef를 사용하는 방법을 보여드리겠습니다. Angular4에서 ElementRef를 사용할 때 notes는 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

Angular의 슬로건은 - "하나의 프레임워크, 다중 플랫폼. 모바일과 데스크톱 모두에 적합합니다. (One Framework.Mobile & 데스크탑.)" 즉, Angular는 웹 애플리케이션, 모바일 웹 애플리케이션, 기본 모바일 애플리케이션, 기본 데스크톱 애플리케이션 등과 같은 크로스 플랫폼 애플리케이션의 개발을 지원합니다.

크로스 플랫폼을 지원하기 위해 Angular는 추상화 계층을 통해 다양한 플랫폼의 차이점을 캡슐화하고 API 인터페이스를 통합합니다. 예를 들어 추상 클래스인 Renderer와 추상 클래스 RootRenderer 등 또한 ElementRef, TemplateRef, ViewRef, ComponentRef와 같은 참조 유형이 정의됩니다. 및 ViewContainerRef 등 ElementRef 클래스를 분석해 보겠습니다.

ElementRef의 역할

애플리케이션 계층에서 DOM을 직접 조작하면 애플리케이션 계층과 렌더링 계층 사이에 강한 결합이 발생하여 웹 작업자와 같은 다른 환경에서 애플리케이션을 실행할 수 없게 됩니다. 작업자 환경에서는 DOM을 직접 조작할 수 없습니다. 관심 있는 독자는 Web Workers에서 지원되는 클래스와 메서드를 읽어볼 수 있습니다. 통과하다 ElementRef를 사용하면 다양한 플랫폼의 뷰 레이어에 있는 기본 요소를 캡슐화할 수 있습니다(브라우저 환경에서 기본 요소는 일반적으로 DOM을 참조함). 요소) 그리고 마지막으로 Angular에서 제공하는 강력한 Dependency Insertion 기능을 사용하면 기본 요소에 쉽게 액세스할 수 있습니다.

ElementRef 정의

export class ElementRef {
 public nativeElement: any;
 constructor(nativeElement: any) { this.nativeElement = nativeElement; }
}

ElementRef

적용 먼저 전체 요구 사항을 소개하겠습니다. 페이지에서 p 요소를 가져오고 페이지가 성공적으로 렌더링된 후 p 요소의 배경색을 변경하려고 합니다. 다음으로 이 요구 사항을 단계별로 구현하겠습니다.

먼저 p 요소를 가져와야 합니다. 기사의 "ElementRef 역할" 섹션에서 Angular를 사용할 수 있다고 언급했습니다. 캡슐화된 기본 요소를 얻기 위한 강력한 종속성 주입 기능을 제공합니다. 브라우저에서 기본 요소는 DOM 요소만 먼저 가져오면 됩니다. my-app 요소를 선택한 다음 querySelector API를 사용하여 페이지에서 p 요소를 가져옵니다. 구체적인 코드는 다음과 같습니다:

import { Component, ElementRef } from '@angular/core'; @Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
  <p>Hello {{ name }}</p>
 `,
}) export class AppComponent {
 name: string = 'Semlinker'; constructor(private elementRef: ElementRef) { let pEle = this.elementRef.nativeElement.querySelector('p'); console.dir(pEle);
 }
}

위 코드를 실행하면 콘솔에서는 예외가 발생하지 않지만 출력 결과는 null 입니다. 무슨 일이야? 아니요 예외가 발생했습니다. 추론할 수 있습니다. This.elementRef.nativeElement 개체가 존재하지만 해당 하위 요소를 찾을 수 없습니다. constructor가 호출될 때 my-app이어야 합니다. 요소 아래의 하위 요소가 아직 생성되지 않았습니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? 생각해보니... setTimeout이 좀 개선된 것 아닌가요?

 constructor(private elementRef: ElementRef) {
 setTimeout(() => { // 此处需要使用箭头函数哈，你懂的...
   let pEle = this.elementRef.nativeElement.querySelector('p');
   console.dir(pEle);
  }, 0); }

문제가 해결되었지만 그다지 우아하지 않습니까? 더 나은 해결책이 있습니까? 대답은 '예'입니다. Angular는 구성 요소의 수명 주기에 대한 후크를 제공하지 않으며 적절한 시간을 선택하고 원하는 p 요소를 얻을 수 있습니다. rreee 위 코드를 실행하면 예상되는 p 요소가 표시됩니다. ngAfterViewInit을 직접 사용합니다. 왜 이 고리가 눈에 가장 좋기 때문에 나에게 묻지 마십시오. 하지만 나중에 Angular 구성 요소의 수명 주기를 자세히 분석하는 특별 기사도 준비하겠습니다. 성공적으로 p를 획득했습니다. 요소의 경우 나머지는 스타일 개체를 통해 직접 요소의 배경색을 설정하는 것이 쉽습니다.

기능이 구현됐지만 아직 최적화의 여지가 있나요?

rreee

즉시 기분이 좋아지지 않나요? 그런데 잠깐만요. 위 코드에 추가로 최적화할 여지가 있나요? 우리는 그 설정 p를 봅니다. 요소의 배경은 브라우저의 기본 애플리케이션 실행 환경입니다. 앞서 언급했듯이 애플리케이션 계층과 렌더링 계층 간의 강력한 결합 관계를 최소화하여 애플리케이션이 다양한 환경에서 유연하게 실행될 수 있도록 해야 합니다. 마지막으로 최종 최적화 코드를 살펴보겠습니다.

 import { Component, ElementRef, AfterViewInit } from '@angular/core'; @Component({
 selector: 'my-app',
 template: `
  <h1>Welcome to Angular World</h1>
  <p>Hello {{ name }}</p>
 `,
}) export class AppComponent {
 name: string = 'Semlinker'; // 在构造函数中 this.elementRef = elementRef 是可选的，编译时会自动赋值 // function AppComponent(elementRef) { this.elementRef = elementRef; } constructor(private elementRef: ElementRef) { } 
 ngAfterViewInit() { // 模板中的元素已创建完成 console.dir(this.elementRef.nativeElement.querySelector('p')); // let greetp: HTMLElement = this.elementRef.nativeElement.querySelector('p'); // greetp.style.backgroundColor = 'red'; }
}

1.Renderer API에는 일반적으로 사용되는 다른 메소드가 있습니까?

rreee

Angular 4.x+ 버전에서는 Renderer(Angular V2) 대신 Renderer2를 사용한다는 점에 유의해야 합니다.

2.Renderer2 API 还有哪些常用的方法？

export abstract class Renderer2 { abstract createElement(name: string, namespace?: string|null): any; abstract createComment(value: string): any; abstract createText(value: string): any; abstract setAttribute(el: any, name: string, value: string, namespace?: string|null): void; abstract removeAttribute(el: any, name: string, namespace?: string|null): void; abstract addClass(el: any, name: string): void; abstract removeClass(el: any, name: string): void; abstract setStyle(el: any, style: string, value: any, 
  flags?: RendererStyleFlags2): void; abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void; abstract setProperty(el: any, name: string, value: any): void; abstract setValue(node: any, value: string): void; abstract listen(
   target: 'window'|'document'|'body'|any, eventName: string,
   callback: (event: any) => boolean | void): () => void;
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！