样式指令是如何定义的？

Question

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

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

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

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

谢谢！

Answer 1

它是内置的 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

Answer 2

如果你看他们的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 及其样式绑定的情况下，他们确实像一样解析它

样式指令是如何定义的？

How is the style directive defined?

angular-directive

angular