样式的优先级link

Style Precedencelink

当存在多个绑定具有相同的类名或样式属性名时，Angular 会使用一组优先级规则来确定要应用于此元素的类或样式。这些规则指定了与样式和类相关的绑定的优先顺序。最有特异性的优先级最高，最宽松的优先级最低，样式优先级如下：

When there are multiple bindings to the same class name or style attribute, Angular uses a set of precedence rules to determine which classes or styles to apply to the element. These rules specify an order for which style and class related bindings have priority. This styling precedence is as follows, from the most specific with the highest priority to least specific with the lowest priority:

1. 模板绑定是最有特异性的，因为它们直接且排他地应用于此元素，因此它们具有最高的优先级。

   Template bindings are the most specific because they apply to the element directly and exclusively, so they have the highest precedence.

   Binding type	Example
   Property binding	<div [class.foo]="hasFoo"> <div [style.color]="color">
   Map binding	<div [class]="classExpression"> <div [style]="styleExpression">
   Static value	<div class="foo"> <div style="color: blue">

2. 指令的宿主绑定不太有特异性，因为你可以在多个位置使用该指令，因此它们的优先级比模板绑定低。

   Directive host bindings are less specific because you can use directives in multiple locations, so they have a lower precedence than template bindings.

   Binding type	Example
   Property binding	host: {'[class.foo]': 'hasFoo'} host: {'[style.color]': 'color'}
   Map binding	host: {'[class]': 'classExpr'} host: {'[style]': 'styleExpr'}
   Static value	host: {'class': 'foo'} host: {'style': 'color: blue'}

3. 组件宿主绑定的优先级最低。

   Component host bindings have the lowest precedence.

   Binding type	Example
   Property binding	host: {'[class.foo]': 'hasFoo'} host: {'[style.color]': 'color'}
   Map binding	host: {'[class]': 'classExpression'} host: {'[style]': 'styleExpression'}
   Static value	host: {'class': 'foo'} host: {'style': 'color: blue'}

优先级与特异性link

Precedence and specificitylink

在下面的示例中，与 [class.special] 对特定类的绑定优先于一般性的 [class] 绑定。同样，到特定样式的绑定（例如 [style.color] ）要优先于一般性的 [style] 绑定。

In the following example, binding to a specific class, as in [class.special], takes precedence over a generic [class] binding. Similarly, binding to a specific style, as in [style.color], takes precedence over a generic [style] binding.

      
        content_copy
      
      <h3>Basic specificity</h3>

<!-- The `class.special` binding overrides any value for the `special` class in `classExpression`.  -->
<div [class.special]="isSpecial" [class]="classExpression">Some text.</div>

<!-- The `style.color` binding overrides any value for the `color` property in `styleExpression`.  -->
<div [style.color]="color" [style]="styleExpression">Some text.</div>
    

来自不同来源的优先级和绑定link

Precedence and bindings from different sourceslink

特异性规则也作用于绑定，即使它们来自不同的来源。元素可以具有源自针对自身模板的绑定、源自其匹配指令的宿主绑定以及源自匹配其组件的宿主绑定。

Specificity rules also apply to bindings even when they originate from different sources. An element can have bindings that originate from its own template, from host bindings on matched directives, and from host bindings on matched components.

      
        content_copy
      
      <h3>Source specificity</h3>

<!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding>Some text.</comp-with-host-binding>

<!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
<comp-with-host-binding [style.color]="color" dirWithStyleBinding>Some text.</comp-with-host-binding>
    

绑定和静态 Attribute 的优先级link

Precedence of bindings and static attributeslink

绑定优先于静态属性，因为它们是动态的。在以下情况下，class 和 [class] 具有相似的特异性，但是 [class] 绑定更有优先权。

Bindings take precedence over static attributes because they are dynamic. In the following case, class and [class] have similar specificity, but the [class] binding takes precedence.

      
        content_copy
      
      <h3>Dynamic vs static</h3>

<!-- If `classExpression` has a value for the `special` class, this value overrides the `class="special"` below -->
<div class="special" [class]="classExpression">Some text.</div>

<!-- If `styleExpression` has a value for the `color` property, this value overrides the `style="color: blue"` below -->
<div style="color: blue" [style]="styleExpression">Some text.</div>
    

用较低的优先级委托到某些样式link

Delegating to styles with lower precedencelink

通过使用 undefined 值，较高优先级的样式也可以让位于较低优先级的样式。例如，考虑以下模板：

Higher precedence styles can defer to lower precedence styles using undefined values. For example, consider the following template:

      
        content_copy
      
      <comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
    

假设 dirWithHostBinding 指令和 comp-with-host-binding 组件都具有 [style.width] 宿主绑定。

Imagine that the dirWithHostBinding directive and the comp-with-host-binding component both have a [style.width] host binding.

      
        content_copy
      
      @HostBinding('style.width')
width = '200px';
    

如果 dirWithHostBinding 将其绑定设置为 undefined ，则 width 属性将回退到 comp-with-host-binding 宿主绑定的值。

If dirWithHostBinding sets its binding to undefined, the width property falls back to the value of the comp-with-host-binding host binding.

      
        content_copy
      
      @HostBinding('style.width')
width = ''; // undefined
    

      
        content_copy
      
      @HostBinding('style.width')
width = null;