elementRef.nativeElement.idに代わって

Question

私は、交換elementRef.nativeElementを使用することはお勧めできません。また、iTをViewChildなどの何らかのタグで置き換えることをお勧めします。一般的な型のネイティブ要素がある場合、これらのタグを使用してこれらのタグを使用するとどうすればよいでしょうか。私は未知のタイプの一般的な要素のidにアクセスする必要があります。

elmentRef.nativeElement.id 

は私の関連package.json：

"@angular/common": "4.2.5", 
"@angular/compiler": "4.2.5", 
"@angular/core": "4.2.5" 

私は5月他の人のための親であるこのコードを交換しようとしています私は取得していますので、自分のライブラリー：

import { ElementRef } from '@angular/core'; 

export abstract class IdentityComponent { 
    id = ''; 

    constructor(protected el: ElementRef) { 
     if (el) { 
      this.id = el.nativeElement.id; 
     } 
    } 
} 

Answer 1

私はいくつかの研究を行い、最終的に答えを得ました。レンダラーを介してelementRefにアクセスすることは、角度2/4でのより良いアプローチです。

Angular 2レンダラーを使用すると、作業中のプラットフォームに関係なく、テンプレートで作成された要素を安全に使用できます。コンポーネントはServiceWorkerや他のプラットフォーム内で簡単に使用できるので、DOMアクセスを安全に保つためにレンダラーに常に依存する必要があります。

ElementRefを使用しても、サイトの安全性が低下することはありません。 Angularチームはちょうど「こんにちは、これを使うかもしれません、ちょっと注意してください」と言っています。

ElementRefを使用して特定の幅のような情報を取得する場合、セキュリティリスクはまったくありません。 ElementRefを使用してDOMを変更すると、別の話です。そこで、潜在的な脅威が発生する可能性があります。

@ViewChild('myIdentifier') 
myIdentifier: ElementRef 

ngAfterViewInit() { 
    this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser; 
} 

この問題は、Angular sanitisationメカニズムをスキップしてDOMに直接挿入されるという問題があります。消毒機構とは何ですか？通常、DOM内の何かがAngularで変更された場合、Angularは何も危険でないことを確認します。しかし、ElementRefを使用してDOMに何かを挿入するとき、Angularはこれを保証できません。したがって、ElementRefを使用する場合、DOMに何も悪いことはないということがあなたの責任となります。ここで重要なキーワードはXSS（クロスサイトスクリプティング）です。

要約すると、情報をDOMにポーリングすると安全です。 ElementRefを使用してDOMを変更する場合は、変更内容に悪質なコードが含まれていないことを確認してください。

これが役に立ったら教えてください

Answer 2

むしろelementRefの使用を交換する方法を疑問に思うよりも、それが最初の場所で必要な理由、あなたが尋ねる必要があります。私たちは、あなた（または前のプログラマー）が要素のIDを必要としていた理由と、それを使って何をやっていたのかを理解する必要があります。一般に、AngularではIDを処理する必要はほとんどありません。通常、IDベースのロジックの存在は、jQueryのようなDOM操作を行うための、ある種のデザインのアンチパターンを示します。

ところで、この方法で継承を使用して、ロジックに少しでも混ざってコンポーネントに組み込むことも悪い習慣です。