如何在结构指令中操作数据绑定答案

【问题标题】：How to manipulate data binding in structural directive如何在结构指令中操作数据绑定
【发布时间】：2019-02-22 13:16:27
【问题描述】：

我有一个结构指令，处理输入控件（并在现实世界中使用 DOM 做更多事情）。请看这个例子https://stackblitz.com/edit/structural-directive-binding。

我需要一些东西来操作输入值。在此示例中，我想输入“角度”。显示的输入值应为“ANGULAR”，但模型值仍应为“angular”。

我需要同时支持模板和模型驱动方法。

如果我要创建一个组件，我会为此任务实现 ControlValueAccessor 接口。但我认为，这不适用于结构性指令。在 angular.js 中，我将为这项工作提供格式化程序/解析器。怎么走？

【问题讨论】：

有必要使用指令吗？您是否只需要大写的值来进行可视化？如果仅用于 UI，则可以使用 Pipe。看看你修改过的例子：stackblitz.com/edit/structural-directive-binding-8w5kbt
@kedenk 大写只是一个例子。大写也可以由 CSS 完成。实际上，is 更复杂，必须处理传入和传出数据（请参阅 ng1 中的格式化程序/解析器或组件中的 ControlValueAccessor）。但它必须是一个结构指令，因为我必须操作 DOM（我在这个例子中省略了，因为 ist 与我的问题无关）。
这将有助于了解您真正想要实现的目标，因为像这样的示例对于指令来说似乎是一个糟糕的用例
@Vojtech - 请查看我接受的分析器。考虑一个输入控件后面的制作。一方面我必须进行一些 DOM 操作，另一方面我想实现对输入的传入和传出数据的操作。结合使用这 2 种指令，我可以更灵活地使用本机控件而不是自定义控件。

【解决方案1】：

我认为有两个不同的问题。在 UI 上显示操纵数据并使用 DOM 做一些事情。由于 ngModel 行为，我不确定您是否可以在这样的单个指令中执行您想要的操作。

我建议使用属性指令/管道（内置大写或自定义）来操作输入值的外观，并使用结构指令来操作 DOM。

【讨论】：

这似乎是去这里的方式。属性指令可以实现 controlValueAccessor 接口，并允许操作输入和输出流。而结构指令可以做dom相关的部分。看来您是对的，我必须将两个任务分开。