ホームページ >ウェブフロントエンド >jsチュートリアル >Angular で DOM 要素を操作する方法について説明する記事
Angular で DOM 要素を操作するにはどうすればよいですか?次の記事では、angular で DOM 要素を操作する方法を紹介します。
DOM 要素を Angular で取得するには、
JavaScript のネイティブ API
を使用するか、jQuery を導入してjquery を通じて DOM を操作します。 object
ですが、angular は DOM 要素を取得するための対応する API (ElementRef
) を提供しているため、ネイティブ API や jQuery を使用する必要はありません。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
1. TestComponent# を作成します# #コンポーネント、テンプレートは次のとおりです:
test.component.html
<div> <p>你好</p> </div> <div> <span>世界</span> </div> <h1>标题</h1> <pass-badge id="component" textColor="red">组件</pass-badge>2.
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')) } }us
this.el.nativeElement が何であるかを見てみましょう
したがって、
this.el.nativeElement.querySelector( '#component' ) を使用して、対応する DOM 要素を操作します。たとえば、テキストの色
this.el.nativeElement.querySelector('#component').style.color = 'lightblue'
コンポーネントを変更します。ViewChild##を通じてコンポーネントを取得できます。 #、##ContentChild
TestComponent、
ViewChildren、および
ContentChildren# も同様です。
<div> <p>你好</p> </div> <!-- 1、给元素加入模板变量 div --> <div #div> <span>世界</span> </div> <h1>标题</h1> <!-- 给组件加入模板变量 component --> <pass-badge #component textColor="red">组件</pass-badge>
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' // 文字颜色修改为淡蓝色 } }
最終結果は次のとおりです
結果から、
ViewChildテンプレート変数を使用してコンポーネント要素を取得すると、取得されるのはエクスポートされたコンポーネント クラスであることがわかります。 (上記の例はをご覧ください。 !PassBadgeComponent
テンプレート変数を使用して html 要素を取得する場合、取得されるクラスは) 現時点では、コンポーネントに含まれるプロパティのみを操作できます。
ViewChild
ElementRef
プログラミング ビデオ型になりますが、このとき
this を渡すことができます。 div.nativeElement.querySelector('span')および要素を操作するためのその他のネイティブ API
プログラミング関連の知識の詳細については、
以上がAngular で DOM 要素を操作する方法について説明する記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。