如何根据宿主元素制作动态结构指令答案

【问题标题】：how to make dynamic structural directive based upon host element如何根据宿主元素制作动态结构指令
【发布时间】：2017-04-18 03:06:19
【问题描述】：

我们的组织正在从 AngularJS 迁移到 Angular。在 Angular 世界中，我们有一个 attirbute 指令，如果我们处于“只读”模式，我们可以使用该指令将输入呈现为纯文本。

假设myfield是“我的价值”，那么

<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。所以，这可能对我们根本不起作用。

我正在尝试做的事情可能吗？

【问题讨论】：

标签： angular

【解决方案1】：

由于没有人回答，我会尝试。看起来很hacky。

在构造函数中创建一个接受 NgModel 的指令
添加您输入的指令。
为只读创建一个带有静态文本的 DOM 元素。
之后用新的 dom 替换旧的 dom。 this.el.nativeElement.parentElement.replaceChild(this.el.nativeElement, newDOM);

【讨论】：