高度なAngular2でDomの誤解を避ける方法

不言
リリース: 2018-04-03 09:33:08
オリジナル
1011 人が閲覧しました

この記事は、Angular2 の上級者向けの Dom の誤解を避ける方法を主に紹介しています。編集者が非常に優れていると考えたので、参考として共有します。エディターをフォローして一緒に見てみましょう

前書き

Angular2 の設計目標は、ブラウザと DOM を独立させることです。 DOM は複雑なので、DOM からコンポーネントを分離すると、アプリケーションのテストとリファクタリングが容易になります。クロスプラットフォームをサポートするために、Angular は抽象化を通じてさまざまなプラットフォームの違いもカプセル化します。

内容

1. DOM を直接操作できないのはなぜですか?

Angular2 は AOT 静的コンパイル モードを採用しています。この形式では、テンプレート タイプは安定していて安全である必要があります。JavaScript と jquery 言語を直接使用すると、コンパイルでエラーが事前に検出されないため、angular2 のみが typescript 言語を選択します。 、JavaScript のスーパーセット (この言語はコンパイル中にエラーを検出できます)。

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 &#39;@angular/core&#39;;
@Component({
 selector: &#39;app-product&#39;,
 templateUrl: &#39;./product.component.html&#39;,
 styleUrls: [&#39;./product.component.css&#39;]
})

export class ProductComponent implements OnInit,AfterViewInit {
 @ViewChild(&#39;dia&#39;) dia:ElementRef ;定义子试图
 ngOnInit() {
 /**1.
 *创建一个文本
 */
  this.dia.nativeElement.innerHTML="这只是一个测试的文档";

 /**2.
  *添加click事件
  */
 let ul=this.element.nativeElement.querySelector(&#39;ul&#39;);
  this.render2.listen(ul,"click",()=>{
   this.render2.setStyle(ul,"background","blue");

ngAfterViewInit(){
/**3.
 *修改背景颜色
 */
 let li=this.element.nativeElement.querySelector(&#39;ul&#39;);
 this.render2.setStyle(li,"background","red");
 }
}
ログイン後にコピー


実際、言語を学ぶときは、まずその仕様に従い、前の言語との違いを受け入れ、それから前の言語と何が違うのか、なぜそうするのかを深く理解しなければ理解できません。この言語は素晴らしいです。お役に立てば幸いです。




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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!