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

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

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

要素の取得

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

ラッパー

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

@Component({
  selector: 'app-test-page',
  templateUrl: './test-page.component.html',
  styleUrls: ['./test-page.component.scss']
})
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('.test-get-dom')); // 获取指定的子元素
  }

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 '@angular/core';

import { DialogComponent } from './../../common/components/dialog/dialog.component';


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

  @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild('testdom') 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サイト！

関連する推奨事項:

ネイティブ JS と jQuery は、それぞれ jsonp を使用して「現在の天気情報」を取得します

JavaScript Error オブジェクトの解析

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