Angular で Dom を使用する際の誤解を避ける方法

今回は、Angular で 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
 }
}

3. Angular2 はどのように

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 サイトの他の関連記事にもご注目ください。

推奨読書:

Vue の組み込み命令の使用の概要

FileReader API を使用して Vue ファイル リーダーを作成する方法

ページ コード分割の実装方法など- React によるデマンドローディング

以上がAngular で Dom を使用する際の誤解を避ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。