ホームページ > 記事 > ウェブフロントエンド > Angular2 で Dom を使用する方法
今回はAngular2でのDomの使い方と、Angular2でDomを使用する際の注意点を実際の事例を交えて紹介します。
はじめに
Angular2 の設計目標は、ブラウザと DOM を独立させることです。 DOM は複雑なので、DOM からコンポーネントを分離すると、アプリケーションのテストとリファクタリングが容易になります。クロスプラットフォームをサポートするために、Angular は抽象化を通じてさまざまなプラットフォームの違いもカプセル化します。
内容
1. DOM を直接操作できないのはなぜですか?
Angular2 は AOT 静的コンパイル モードを採用しています。この形式では、テンプレート タイプが安定していて安全である必要があります。JavaScript と jQuery 言語を直接使用すると、コンパイルで事前にエラーが検出されないため、angular2 を選択することになります。 javascript のスーパーセットである typescript 言語 (この言語のコンパイル中にエラーが見つかる可能性があります)。
2. DOM を操作する 3 つの間違った方法:@Component({ ... })
export class HeroComponent {
constructor(private _elementRef: ElementRef) {}
doBadThings() {
$('id').click(); //jquery
this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
document.getElementById('id'); //javascript
}
}
DOM を操作するのか? クロスプラットフォームをサポートするために、Angular は抽象化レイヤーを通じてさまざまなプラットフォームの違いをカプセル化します。例えば、
抽象クラスRenderer、Renderer2、抽象クラス RootRenderer などが定義されています。さらに、ElementRef、TemplateRef、ViewRef、ComponentRef、ViewContainerRef などの参照タイプが定義されています。
4. DOM (ElementRef と Renderer2) を操作する正しい方法:product.component.html
<p>商品信息</p> <ul> <li *ngFor="let product of dataSource| async as list"> {{product.title}} </li> </ul> <p #dia> </p>
product.component.ts
import { Component, OnInit,Renderer2, ViewChild,ElementRef,AfterViewInit} from '@angular/core'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit,AfterViewInit { @ViewChild('dia') dia:ElementRef ;定义子试图 ngOnInit() { /**1. *创建一个文本 */ this.dia.nativeElement.innerHTML="这只是一个测试的文档"; /**2. *添加click事件 */ let ul=this.element.nativeElement.querySelector('ul'); this.render2.listen(ul,"click",()=>{ this.render2.setStyle(ul,"background","blue"); ngAfterViewInit(){ /**3. *修改背景颜色 */ let li=this.element.nativeElement.querySelector('ul'); this.render2.setStyle(li,"background","red"); } }概要
実際、言語を学習するとき、まずはその仕様に従い、以前の言語との違いを受け入れ、それから以前の方法と何が違うのか、なぜ違うのかを深く理解しなければ、この言語の美しさは理解できないと思います。あなたに役立ちます!
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
ReactでのVuexメソッドの使用の詳細な説明nodejsのマルチバージョン管理の使用の詳細な説明以上がAngular2 で Dom を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。