Angular で DOM を正しく操作する方法-jsチュートリアル-php.cn

Angular で DOM を正しく操作する方法

不言

リリース： 2018-07-07 10:30:42

オリジナル

2117 人が閲覧しました

この記事は、Angular で DOM を正しく操作する方法を主に紹介しています。これで、必要な友達に共有できます。

古いプロジェクトを引き継ぐことになりました。 Angular プロジェクトでは DOM の操作に JQuery が広範囲に使用されていましたが、これは非常に単純です。では、Angular を使用して DOM をエレガントに操作するにはどうすればよいでしょうか?

要素の取得

1. ElementRef --- View内のネイティブ要素を囲む

ラッパー

コンポーネントのコンストラクターにElementRefを注入して、コンポーネント要素全体のパッケージを取得します。

@Component({
  selector: &#39;app-test-page&#39;,
  templateUrl: &#39;./test-page.component.html&#39;,
  styleUrls: [&#39;./test-page.component.scss&#39;]
})
export class TestPageComponent implements OnInit {

  constructor(    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {
    console.dir(this.el);
  }
｝

ログイン後にコピー

ElementRefのnativeElementは、コンポーネントの最も外側のDOM要素です。次に、ネイティブ DOM 配置メソッドを通じて、指定されたセレクター要素を取得できます。

  getDomTest() {
    console.dir(this.el.nativeElement.querySelector(&#39;.test-get-dom&#39;)); // 获取指定的子元素
  }

ログイン後にコピー

2. @viewChild() --- ViewChild を使用して、ビュー DOM から最初の要素またはセレクターに一致するディレクティブを取得できます

@viewChild は指定された要素を取得でき、指定されたメソッドは実行できます。ローカル変数またはコンポーネントタイプである必要があります。

// HTML
<p class="tip-test-wrapper">
　　　
    <button class="test-get-dom"  (click)="getDomTest()">测试获取DOM</button>
 </p>
　　<app-dialog></app-dialog>


// ts
import { DialogComponent } from &#39;./../../common/components/dialog/dialog.component&#39;;


@Component({
  selector: &#39;app-test-page&#39;,
  templateUrl: &#39;./test-page.component.html&#39;,
  styleUrls: [&#39;./test-page.component.scss&#39;]
})
export class TestPageComponent implements OnInit {
　 // 通过本地变量获取元素  可通过read来指定获取的元素类型
  @ViewChild(&#39;testdom&#39; , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild(&#39;testdom&#39;) viewelement: ElementRef;

　 // 通过组件类型来获取
  @ViewChild(DialogComponent) viewcontent: DialogComponent;

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {
    // console.dir(this.el.nativeElement.querySelector(&#39;.test-get-dom&#39;));
    console.dir(this.viewcontainer);
    console.dir(this.viewelement);
    console.dir(this.viewcontent);
  }
}

ログイン後にコピー

注: ElementRef または @viewChild は要素を取得し、ngAfterViewInit サイクルの後に使用する必要があります。

3. @viewChildren -- You can use ViewChildren to get the {@link QueryList} of elements or directives from the view DOM.

複数取得する必要がある場合、@viewChild は条件を満たす最初の要素を返します条件を満たす要素要素はどうでしょうか？

@viewChildren は、条件を満たすすべての要素のリストを返します。セレクターの指定方法は@viewChildと統一しています。

// 复制一个元素
  <p class="tip-test-wrapper">
    <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
  </p>
  <p class="tip-test-wrapper">
    <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
  </p>
</p>
<app-dialog></app-dialog>
<app-dialog></app-dialog>// tsimport { DialogComponent } from &#39;./../../common/components/dialog/dialog.component&#39;;


@Component({
  selector: &#39;app-test-page&#39;,
  templateUrl: &#39;./test-page.component.html&#39;,
  styleUrls: [&#39;./test-page.component.scss&#39;]
})
export class TestPageComponent implements OnInit {

  @ViewChild(&#39;testdom&#39; , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild(&#39;testdom&#39;) viewelement: ElementRef;  @ViewChildren(&#39;testdom&#39;) viewelements: QueryList<any>;

ログイン後にコピー

  @ViewChild(DialogComponent) viewcontent: DialogComponent;  @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

  constructor(    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {    // console.dir(this.el.nativeElement.querySelector(&#39;.test-get-dom&#39;));    // console.dir(this.viewcontainer);
    console.dir(this.viewelement);
    console.dir(this.viewelements);
    console.dir(this.viewcontent);
    console.dir(this.viewcontents);
  }

ログイン後にコピー

Operation DOM --- Renderer2

DOMを入手した後、どうやってDOMを操作するか？ネイティブ domAPI はオプションですが、Angular はより優れたクロスプラットフォームの方法である Renderer2 を提供します。

Renderer2、を導入し、constructに注入します。

import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild,  , ViewChildren, QueryList} from &#39;@angular/core&#39;;

import { DialogComponent } from &#39;./../../common/components/dialog/dialog.component&#39;;


@Component({
  selector: &#39;app-test-page&#39;,
  templateUrl: &#39;./test-page.component.html&#39;,
  styleUrls: [&#39;./test-page.component.scss&#39;]
})
export class TestPageComponent implements OnInit {

  @ViewChild(&#39;testdom&#39; , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild(&#39;testdom&#39;) viewelement: ElementRef;
  @ViewChildren(&#39;testdom&#39;) viewelements: QueryList<any>;
  @ViewChild(DialogComponent) viewcontent: DialogComponent;
  @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {

    
  }
｝

ログイン後にコピー

renderer2 は、次のような豊富な API を提供しています:

概要

elementRef または @viewChild @viewChildren を通じて要素を取得し、renderer2 が提供する API を通じて要素を操作します。ただし、ngAfterViewInit サイクルの前には使用しないように注意してください。 Angular が提供するメソッドを通じて、DOM を操作するためのほとんどのニーズを満たすことができます。特別なシーンがある場合は、もちろんネイティブ DOM を使用する方がよいでしょう。以上がこの記事の全内容です。その他の関連内容については、PHP 中国語に注目してください。 Webサイト！