Angular 2 以降のスタイル バインディングの方法は何ですか

この記事では主に Angular 2+ スタイルのバインディングを解析する方法を紹介し、参考として提供します。

はじめに

私は 1 年半にわたって ngx (angular 2+ は今後直接 ngx と呼ばれます) を開発してきました。最初に開発を始めたときは angular2 RC を使用しました。 Angular5 バージョンはすぐに利用可能になります。 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来动态改变样式。

但我不推荐

ngx は最初からコンポーネントベースのフレームワークであるため、ページからボタンまですべてがコンポーネントです。

これには、コンポーネントの再利用が含まれます。ユニバーサル コンポーネントを設計する場合、動的なスタイル バインディングが不可欠です。 🎜🎜振り返ってみると、Angular は実際にプロパティ バインディングのメソッドをいくつか提供しています。 🎜🎜次に、コンポーネントでスタイル バインディングを使用する方法を詳しく見てみましょう。 🎜🎜🎜スタイル バインディング🎜🎜🎜🎜[style.propertyName]🎜🎜🎜ボタンがあります。デフォルトのスタイルは bootstrap primary、🎜🎜 ボタンのサイズがページごとに異なる場合は、ボタンのフォント サイズを動的にバインドする必要があります。これを行うには、[style.propertyName] を使用します。これを達成する。 🎜🎜テンプレートのコード🎜

//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";

🎜コンポーネントクラスのコード🎜rrreee🎜結果は図のようになります:🎜

🎜🎜ボタン border-radius の境界線の半径も動的に設定する必要がある場合は、 🎜🎜テンプレートのコードは次のようになります:🎜rrreee🎜 Componentクラスのコードは次のようになります: 🎜rrreee🎜結果は次のようになります: 🎜

🎜🎜 [style.propertyName] を使用してスタイル属性をバインドするのは簡単ではありませんが、新しい属性が追加されたら必要があるため、引き続き追加する必要があります。現時点では、コンポーネントにバインドされるプロパティがますます増えます。バインドする必要があるプロパティを保存するための object を作成する方法はありますか。 ? もちろん、[ngStyle] はこれを行うのに役立ちます。 🎜🎜🎜[ngStyle]🎜🎜🎜 したがって、上記の例では、[ngStyle] を直接使用して、ボタンの font-size と border を動的にバインドできます。半径。 🎜🎜テンプレートのコードは次のようになります: 🎜rrreee🎜 Component クラスのコードは次のようになります: 🎜rrreee🎜結果は次のようになります: 🎜

🎜🎜🎜[style.propertyName] 対 [ngStyle]🎜🎜🎜[style.propertyName] 毎回バインドできるプロパティは 1 つだけです🎜🎜また、[ngStyle] は同時に複数のプロパティをバインドできます🎜🎜たとえば、[style.propertyName] と [ngStyle] が同じプロパティにバインドされている場合、両方とも を動的に変更する必要がありますfont-size 、[style.propertyName] は [ngStyle] の同じプロパティを上書きします🎜🎜もちろん、スタイル バインディングに加えて、クラス バインディングを使用して動的に変更することもできます。スタイル。 🎜🎜<span style="max-width:90%">🎜クラス バインディング🎜</span>🎜🎜🎜[class.className]🎜🎜🎜このメソッドを使用すると、バインディング変数の値に基づいて動的に追加または移動できます。 cssクラスを除く。 <br>先ほどのボタンの例をまだ使用しています。 🎜🎜その後、コードは次のようになります: 🎜rrreee🎜結果は図に示すようになります: 🎜<p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/2b6fca931f9cae5c4cce6adee400c817-6.png?x-oss-process=image/resize,p_40" class="lazy" alt="">🎜🎜フォントが少し小さいので、フォントを変更するクラスを動的に追加しましょう: my🎜🎜このとき、コードは次のようになります: 🎜rrreee🎜結果は次のとおりです: 🎜</p> <p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/2b6fca931f9cae5c4cce6adee400c817-6.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> 🎜🎜🎜[ngClass]🎜🎜🎜 [ngStyle] と同様に、angular は複数の CSS クラスを動的にバインドする命令 [ngClass] も提供します。 🎜🎜その後、[ngClass] を使用して上記のコードをリファクタリングできます🎜rrreee🎜結果は次のようになります:🎜</p> <p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/2b6fca931f9cae5c4cce6adee400c817-6.png?x-oss-process=image/resize,p_40" class="lazy" alt="">🎜🎜[ngClass] はオブジェクトをバインドする必要があります。キーは CSS クラス名、値はバインドされた変数です。 🎜🎜🎜[class.className] と [ngClass] の比較🎜🎜🎜[class.className] は、一度に 1 つの CSS クラスのみをバインドできます。 🎜🎜そして、[ngClass] は複数の CSS クラスを同時にバインドできます。 🎜🎜[class.className] と [ngClass] が同じスタイルを動的に変更する必要がある場合、たとえば、両方とも <code>font-size を動的に変更する必要がある場合、[class.className] は [ ngClass] 内部の統一スタイル。 🎜🎜🎜[className]🎜🎜🎜angular は、要素の className を変更することでスタイルを直接動的に変更するバインディング メソッドも提供します。 🎜🎜しかし、この使用方法は推奨しません。 以下の例を見てください🎜rrreee🎜結果は次のようになりました:🎜

[className] は動的にバインドされたクラス名を追加し、その後、以前のクラス名をすべて削除するため、事前設定されたブートストラップ primary は削除されました。
したがって、このバインド方法は非常に危険です。コンポーネントの場合、通常、スタイルを共同で制御するために多くの型があるからです。

一般的なコンポーネントでは、[className] の使用は非常に非推奨です。

概要

最後に、Angular のさまざまなスタイル バインディングの特徴と違いをまとめてみましょう。

1. [style.propertyName] は、文字列型のスタイル値、または文字列型の変数を直接バインドします。これは最も高い優先度を持ち、既存のスタイル属性を上書きします。

2. [ngStyle] はスタイル組み合わせオブジェクトをバインドします。キーは CSS 属性名、値は対応するスタイル値または文字列型の変数です。

3. [class.className] は、true/false、またはブール型変数を直接バインドします。

4. [ngClass] は、CSS クラス名の組み合わせであるオブジェクトをバインドします。キーは CSS クラス名で、値は true/false またはブール型変数です。

5. [className] は、CSS クラス名または文字列型変数を直接バインドします。 （この方法は推奨されません）

以上、皆さんの参考になれば幸いです。

関連記事:

vueでv-forを介してローカル静的画像を読み込む方法を実装する(詳細チュートリアル)

vueでv-forを使用すると赤くなり警告が表示される問題を解決する方法(詳細チュートリアル)

Vuejs で検索マッチング関数メソッドを実装する方法 (詳細なチュートリアル)

vue.js の選択ドロップダウン ボックスを使用して、バインディング メソッドと値メソッドを実装します

v-for でインデックスを使用します

🎜🎜 Vuejs 最初の項目にクラスを追加する方法と具体的な手順は? 🎜🎜

以上がAngular 2 以降のスタイル バインディングの方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。