Welche Methoden der Stilbindung gibt es in Angular 2+?

这篇文章主要介绍了解析Angular 2+ 样式绑定方式，现在分享给大家，也给大家做个参考。

引言

开发ngx（angular 2+ 以后都直接称为ngx）也有1年半的时间了，刚开始开发的时候使用的还是angular2 RC版，现在已经出angular5了，时光飞逝啊！

ngx从设计之初就是一个component-based的框架，所以大到一个页面，小到一个按钮，都是一个component。

这就涉及到了组件的重用，设计通用组件的时候，必不可少的就是动态的样式绑定。

回头想想， angular还真是给我们提供了好几种属性绑定的方式呢。

接下来我们就来具体看看如果在组件中使用样式绑定。

style binding

[style.propertyName]

我们有一个button，默认的样式是bootstrap的primary,

假如在不同的页面中按钮的大小要不同，这个时候就需要动态绑定button的字体大小，可以使用[style.propertyName]来实现。

template中代码

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize">
  Style Binding
</button>

Component类中代码

private fontSize: string = "2em";

结果如图：

假如我们还需要动态设置button的边框半径border-radius，

template中代码则变为：

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize"
  [style.borderRadius]="borderRadius">
  Style Binding
</button>

Component类中代码则变为：

private fontSize: string = "2em";
private borderRadius: string = "10px";

则结果变成：

使用[style.propertyName]来绑定样式属性固然不粗，可是一旦有新的需求，我们就需要继续加上我们需要绑定的属性， 这个时候组件上绑定的属性就会越来越多，我们有没有办法来创建一个object来存储我们需要绑定的属性呢？ 当然有，[ngStyle]就可以帮我们来做这件事情。

[ngStyle]

所以上面的例子，我们就可以直接使用[ngStyle]来动态绑定button的font-size和border-radius。

template中的代码则变为：

<button 
  class="btn btn-primary" 
  [ngStyle]="btnStyle" >
  Style Binding
</button>

Component类的代码则变为：

private btnStyle: any = {
  borderRadius: "10px",
  fontSize: "2em"
};

结果为：

[style.propertyName] vs. [ngStyle]

[style.propertyName]每次只能绑定一个属性

而 [ngStyle] 则可以同时绑定多个属性

当[style.propertyName] 和 [ngStyle] 绑定同一个属性时，比如都需要动态修改font-size, [style.propertyName]则会覆盖[ngStyle]里面的同一属性.

当然除了style binding, 我们还可以使用class binding来动态修改样式。

class binding

[class.className]

使用这种方式，我们可以根据绑定变量的值来动态添加或者移除css class。
还是使用刚才button的例子。

则代码变为：

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}

//Component Class
private changeBorder: boolean = true;

结果如图：

看着字体有点小啊，我们再动态添加一个改变字体的class：my

这个时候代码就变为了：

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" [class.btnFont]="changeFont" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

结果如图：

[ngClass]

像[ngStyle]一样，angular也给我们提供了一个指令[ngClass]来动态绑定多个css class。

那么我们可以使用[ngClass]对上面的代码重构一下

//template
<button 
  class="btn btn-primary" 
  [ngClass]= "{&#39;btnFont&#39;: changeFont, &#39;btnBorder&#39;: changeBorder}">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

结果依旧为：

[ngClass]需要绑定一个object，key是css类名， value是绑定的变量。

[class.className] vs. [ngClass]

[class.className]每次只能绑定一个CSS类。

而 [ngClass] 则可以同时绑定多个CSS类。

当[class.className] 和 [ngClass] 需要动态修改同一个样式时，比如都需要动态修改font-size, [class.className]则会覆盖[ngClass]里面的统一样式.

[className]

angular还提供一种绑定方式，就是直接通过修改元素的className来动态改变样式。

但我不推荐这种使用方式，为什么不推荐？ 看下面的例子

//template
<button 
  class="btn btn-primary" 
  [className]="changedFont">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changedFont: string = "btnFont";

结果却变成了这样：

Unser vorkonfigurierter Bootstrap primary wurde entfernt, da [className] den dynamisch gebundenen Klassennamen hinzufügt und dann alle vorherigen Klassennamen entfernt.
Diese Bindungsmethode ist also sehr gefährlich, da wir für eine Komponente normalerweise viele Typen haben, um den Stil gemeinsam zu steuern.

In allgemeinen Komponenten ist die Verwendung von [className] stark veraltet.

Zusammenfassung

Lassen Sie uns abschließend die Eigenschaften und Unterschiede verschiedener Stilbindungen in Winkelform zusammenfassen:

1. [propertyName ] bindet direkt einen Stilwert vom Typ String oder eine Variable vom Typ String. Es hat die höchste Priorität und überschreibt vorhandene Stilattribute.

2. [ngStyle] bindet ein Objekt mit einer Stilkombination, der Schlüssel ist der Name des CSS-Attributs und der Wert ist der entsprechende Stilwert oder eine Variable vom Typ String.

3. [class.className] bindet Variablen vom Typ „true/false“ oder „boolean“ direkt.

4. [ngClass] bindet ein Objekt, das eine Kombination aus CSS-Klassennamen ist. Der Schlüssel ist der CSS-Klassenname und der Wert ist eine Variable vom Typ „true/false“ oder „boolean“.

5. [className] bindet direkt den CSS-Klassennamen oder die String-Typ-Variable. (Diese Methode wird nicht empfohlen)

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Implementierung der Methode zum Laden lokaler statischer Bilder über v-for in vue (ausführliches Tutorial)

Anleitung Machen Sie es in Vue. Lösen Sie das Problem der roten Meldung und Warnung bei Verwendung von v-for (ausführliches Tutorial)

So implementieren Sie die Suchabgleichsfunktion in Vuejs (ausführliches Tutorial)

Verwenden Sie das Auswahl-Dropdown-Feld in vue.js, um Bindungs- und Wertmethoden zu implementieren

Verwenden Sie Vuejs, um mithilfe des Index eine Klasse zum ersten Element hinzuzufügen in v-for Und was sind die konkreten Schritte?

Das obige ist der detaillierte Inhalt vonWelche Methoden der Stilbindung gibt es in Angular 2+?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!