如何根据主机元素

Question

我们的组织正在从AngularJS迁移到Angular。在角度世界中，我们有一个attirbute指令，我们用它来制作输入渲染只是文本，如果我们在＆＃34;只读＆＃34;模式。

假设myfield是＆＃34;我的值＆＃34;，那么

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

只会渲染

my value

而不是输入元素。

此外，它足够聪明，可根据类型输入类型应用特定格式。所以日期，数字，文本和电话都将按照我们的风格进行格式化。

我试图在Angular中复制此功能，但没有任何头脑。理想情况下，它将如下工作

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

最初，我尝试将我的选择器设置为input[type=text][myReadonly]但是，随着模板扩展的方式，DOM（或AST）实际上看起来并非如此。其次，我查看了API，看看是否有人在决定渲染之前查看主机，但TemplateRef似乎没有任何反射属性。

最后，如果有办法动态找出渲染方式，我还需要访问当前值，即ngModel。所以，这可能根本不适用于我们。

我正在尝试做什么？

Answer 1

由于没有人回答我会尝试。看起来非常h​​acky。

1. 创建一个在构造函数
中接受NgModel的dircetive
2. 添加您输入的指令。
3. 使用readOnly的静态文本创建DOM元素。
4. 之后用新的dom替换旧的dom。 this.el.nativeElement.parentElement.replaceChild（this.el.nativeElement，newDOM）;