ホスト要素に基づいて動的構造ディレクティブを作成する方法

Question

組織は、AngularJSからAngularに移行しています。角度のある世界では、「読み取り専用」モードの場合、テキストを入力としてレンダリングするために使用するアトリビュートの指示がありました。 myfieldと仮定すると

は

<input my-readonly="true" type="text ng-model="myfield"></input> 

ではなく、入力要素のちょうど

my value 

をレンダリングするでしょうそして、 "わたしの値" です。

さらに、タイプ入力タイプに基づいて特定のフォーマットを適用するのに十分スマートでした。したがって、日付、数字、テキスト、および電話はすべて私たちのスタイルにフォーマットされます。

私はAngularでこの機能を再現しようとしていますが、頭を上げていません。当初

<input *myReadonly="true" type="text ng-model="myfield"></input> 

を次のように理想的には、それが働くだろう、私はテンプレートを展開する方法で、DOM（またはAST）は実際にそのように見えることはありません、しかしinput[type=text][myReadonly]に私のセレクタを設定してみました。次に、APIを見て、レンダリングを決める前にホストを調べるかどうかを確認しましたが、TemplateRefには反射的なプロパティがないようです。

最後に、レンダリングする方法を動的に把握する方法がある場合、現在の値、つまりngModelにもアクセスする必要があります。だから、これはまったくうまくいかないかもしれません。

私は何をしようとしていますか？

Answer 1

誰も回答していないので、私は試してみます。非常にハッキリに見えます。

1. コンストラクタ
2. でNgModelを受け入れdircetiveを作成し、その入力にごプットディレクティブを追加します。
3. readOnlyの静的テキストでDOM要素を作成します。
4. その後、古いDOMを新しいものに置き換えます。 this.el.nativeElement.parentElement.replaceChild（this.el.nativeElement、newDOM）;