Angular で DOM 要素を操作する方法の詳細な説明-jsチュートリアル-php.cn

Angular で DOM 要素を操作する方法の詳細な説明

青灯夜游

リリース： 2022-12-23 19:14:49

オリジナル

1761 人が閲覧しました

Angular で DOM 要素を正しく操作するにはどうすればよいですか?次の記事では、angular で DOM 要素を操作する方法を紹介します。

Angular で DOM 要素を操作する方法の詳細な説明

DOM 要素を Angular で取得するには、JavaScript のネイティブ API を使用するか、jquery オブジェクトを通じて jQuery を導入します。 Operation DOM ですが、Angular は DOM 要素を取得するための対応する API (ElementRef) を提供しているため、ネイティブ API や jQuery を使用する必要はありません。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

ElementRef DOM 要素を取得します

1. TestComponent# を作成します# #コンポーネント、テンプレートは次のとおりです: test.component.html


	你好


    世界

标题
组件

ログイン後にコピー

test.component.ts ファイルを記述します

import { Component, OnInit } from '@angular/core';
// 1、导入 ElementRef 类
import { ElementRef} from '@angular/core';
import { PassBadge } from './compoment/pass-badge/pass-badge.component'

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  declarations: [ PassBadge ]
})
export class TestComponent implements OnInit {
	// 2、将 ElementRef 类注入 test 组件中
    constructor(private el:ElementRef) {}

    ngOnInit() {
    	// 3、获取 DOM 元素
        console.log(this.el.nativeElement)
        console.log(this.el.nativeElement.querySelector('#component'))
    }
}

ログイン後にコピー

this.el.nativeElement が何であるかを見てみましょう

Angular で DOM 要素を操作する方法の詳細な説明したがって、
this.el.nativeElement.querySelector( '#component' ) を使用して、対応する DOM 要素を操作します。たとえば、テキストの色

this.el.nativeElement.querySelector('#component').style.color = 'lightblue'

ログイン後にコピー

テンプレート変数を変更してDOM要素を取得できます

ViewChild##を通じてコンポーネントを取得できます。 #、##ContentChild、ViewChildren、および ContentChildren# も同様です。
TestComponent

コンポーネントを変更します。


    你好



    世界

标题

组件

ログイン後にコピー

2 のように、対応する要素にテンプレート変数を追加します。test.component.ts

を次のように変更します:

import { Component, OnInit } from '@angular/core';
import { ElementRef} from '@angular/core';
// 2、引入ViewChild
import { ViewChild } from '@angular/core'

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
    constructor(private el:ElementRef) {}
    // 3、获取元素
    @ViewChild('component') dom: any;
    @ViewChild('div') div: any;
    ngOnInit() {
        console.log(this.dom)	// PassBadgeComponent
        this.dom.fn()   // 调用 passbadge 组件的 fn 方法
        console.log(this.div)	// ElementRef
        this.div.nativeElement.style.color = 'lightblue'	// 文字颜色修改为淡蓝色
    }
}

ログイン後にコピー

最終結果は次のとおりです

Angular で DOM 要素を操作する方法の詳細な説明結果から、

ViewChild

テンプレート変数を使用してコンポーネント要素を取得すると、取得されるのはエクスポートされたコンポーネントクラスであることがわかります。 (上記の例は
PassBadgeComponent) 現時点では、コンポーネントに含まれるプロパティのみを操作できます。 ViewChild
テンプレート変数を使用して html 要素を取得する場合、取得されるクラスは
ElementRef 型になりますが、このとき this を渡すことができます。 div.nativeElement.querySelector('span') および要素を操作するためのその他のネイティブ APIプログラミング関連の知識の詳細については、
プログラミングチュートリアル

を参照してください。！

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