样式指令是如何定义的？答案

【问题标题】：How is the style directive defined?样式指令是如何定义的？
【发布时间】：2017-12-15 11:28:38
【问题描述】：

我对 Angular 有一定的经验，但当然，有些事情仍然超出我的理解范围。我试图了解在元素上设置特定样式的指令，例如：

<div [style.color]="'red'">...</div>

我的问题是，这个指令是如何在代码中定义的？每个可能的样式值（颜色、背景颜色、边框等）是否有单独的指令定义？或者是否有一个 style 指令的定义，该指令具有检索 . 之后的部分并相应行为的内部代码？

换句话说，我将如何定义一个类似的属性，它可以在它之后接受 .something 并在不同的此类后缀上表现不同？

谢谢！

【问题讨论】：

标签： angular angular-directive

【解决方案1】：

如果你查看他们flex-layout模块的源代码，你需要在一个字符串中定义你能想到的所有可能的组合，并用逗号分隔它们：

@Directive({selector: `
  [fxLayout],
  [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl],
  [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl],
  [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]
`})

在 Angular 及其样式绑定的情况下，它们确实像 Günter says 那样解析它

【讨论】：

这确实很有用，谢谢，现在我无法决定接受谁的答案:)
在控制台中输入：Math.random() > 0.5 ? 'PierreDuc' : 'Gunter'

【解决方案2】：

它是内置的 Angular 绑定语法。
你不能自己建造这样的东西。

另见

- https://github.com/angular/angular/blob/master/packages/compiler/src/template_parser/template_ast.ts#L219
- https://github.com/angular/angular/blob/master/packages/compiler/src/template_parser/binding_parser.ts#L26

【讨论】：

谢谢@Günter Zöchbauer，您能详细说明一下吗？我在哪里可以查看该内部角码？你能指出具体的源文件吗？
我添加了我的答案的链接。