扩展角度模板语法

时间:2017-07-04 18:04:26

标签: angular templates syntax extend

我正在寻找关于如何扩展Angular模板语法的一些建议。

原因:我是Angluar的新手,到目前为止发现它很棒,不过前段时间我编写了自己的简单模板系统,我希望从Angular的范围内检索一些功能。它是为我当时正在处理的项目编写的,具有相同的{{}}语法。区别在于我的系统允许我在两个开口括号之间插入指令,其作用与Angulars过滤器I.E:

相同。

{$ {1000000}} = {{1000000 |货币}} = $ 1,000,000

据我了解,为了让Angular支持英镑,需要编写一个自定义过滤器,例如在此处找到的过滤器:

To convert currency from US to UK in AngularJS

我想提供以下功能:

{GBP {1000000} = 1,000,000英镑 {CAD {1000000} = C $ 1,000,000

依此类推,对于我经常使用模板系统的十几个不同的有用案例。像{l {这将是更低的案例}} {U {{这将是大写}}等等。

在我看来,我可以为页面编写一个简单的预处理器,在Angular实例化之前将我的语法转换为Angular语法,但我觉得这种方法既低效又不优雅。

当然我可以克服它并输入更详细的Angular过滤器指令,但作为一个别有用心的做法,我也对Angular内部及其工作原理感到好奇。

非常感谢任何帮助,非常感谢。

1 个答案:

答案 0 :(得分:0)

使用正则表达式和自定义管道,您绝对可以获得所需的内容。首先,您需要编写自定义管道 - https://angular.io/guide/pipes#custom-pipes

其次,您必须定义一些方法来执行所需的所有格式设置和转换。我不完全确定你正在尝试编写一个管道,但你需要知道的是transform函数最终会为你完成所有的工作。

如果你能更清楚地说明你想要管道的东西,我会很乐意为你提供帮助。