Angular4 で ElementRef を使用する方法

今回は、Angular4 で ElementRef を使用する方法、Angular4 で ElementRef を使用する際の 注意点 について説明します。以下は実際的なケースです。見てみましょう。

Angular のスローガンは - 「1 つのフレームワーク、複数のプラットフォーム。モバイルとデスクトップの両方に適しています (One Framework.Mobile & デスクトップ.)」、つまり、Angular は、Web アプリケーション、モバイル Web アプリケーション、ネイティブ モバイル アプリケーション、ネイティブ デスクトップ アプリケーションなどのクロスプラットフォーム アプリケーションの開発をサポートします。 クロスプラットフォームをサポートするために、Angular は抽象化レイヤーを通じてさまざまなプラットフォームの違いをカプセル化し、API インターフェイスを統合します。たとえば、抽象クラス Renderer と抽象クラス ルートレンダラーなどさらに、次の参照タイプが定義されています: ElementRef、TemplateRef、ViewRef、ComponentRef ViewContainerRef など。 ElementRef クラスを分析してみましょう:

ElementRefの役割

アプリケーション層で DOM を直接操作すると、アプリケーション層とレンダリング層の間に強い結合が生じ、アプリケーションが Web ワーカーなどの異なる環境で実行できなくなります。 ワーカー環境では、DOM を直接操作することはできません。興味のある読者は、Web Workers でサポートされているクラスとメソッドを読むことができます。合格 ElementRef を使用すると、さまざまなプラットフォームのビュー レイヤにネイティブ要素をカプセル化できます (ブラウザ環境では、ネイティブ要素は通常 DOM を参照します)。 要素)、そして最後に、Angular が提供する強力な

Dependency Injection

機能の助けを借りて、ネイティブ要素に簡単にアクセスできるようになります。 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 オブジェクトは存在しますが、その子要素が見つかりません。それは、my-app の constructor が呼び出されたときであるはずです。 この要素の下にある子要素はまだ作成されていません。では、この問題をどうやって解決すればいいのでしょうか？考え中... setTimeout はありませんか? 少し改良中です:

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

問題は解決しましたが、あまりエレガントではありませんか?もっと良い解決策はあるでしょうか? 答えは「はい」です。 Angular はコンポーネントのライフサイクルに対するフックを提供しません。適切な時間を選択して、必要な p 要素を取得できます。

りー

上記のコードを実行すると、予想される p 要素が表示されます。 ngAfterViewInit を直接選択します なぜこのフックなのかは聞かないでください。それが最も目に心地よいからです。ただし、後で Angular コンポーネントのライフサイクルを詳細に分析する特別な記事も作成する予定です。 pの取得に成功しました 要素を追加すれば、残りはスタイル オブジェクトを介して直接要素の背景色を設定するのは簡単です。 機能は実装されましたが、まだ最適化の余地はありますか？

りー

すぐに素晴らしいと思いませんか? しかし、上記のコードにはさらに最適化の余地があるでしょうか? 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 には他にどのような一般的に使用されるメソッドがありますか?

りー

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中文网其它相关文章！

推荐阅读：

Immutable.js怎样实现撤销重做效果

vue判断input输入内容有否有空格

FileReader实现上传图片之前本地先预览

以上がAngular4 で ElementRef を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。