Angular 学習スタイル バインディング (ngClass と ngStyle) の使用の詳細な説明

プロジェクト シナリオ:

フロントエンド開発では、さまざまなページが共有されるという状況によく遭遇します。同じコード部分に対して、同時に、ページの特定の情報や特定の操作 (ボタンのクリックなど) に基づいて、このコードを表示するか、ページ スタイルに特定の変更を加えるかを決定する必要があります。今回は、 で angular スタイル バインディングを使用します!

---

問題の説明

例: Web サイトの 2 ページで同じコードを使用する必要があります。コードを 2 回記述することは、これはドライ (同じことを繰り返さない) 原則と一致せず、効率も非常に低いため、通常、社内の Angular フロントエンド開発プロジェクトではこれは行われません。ある日、リーダーから「zzz、コードを変更してください。このプロンプトでは、このページにはこの効果が必要で、別のページにはその効果が必要です。どうすればよいですか?」以下に簡単な例を示します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

一般的なコード スニペット (変更前):

<div class="normalTxt">      
	<span >I love angular</span>         
</div>

---

理由分析:

angular のスタイル バインディングは、上記の要件を達成できます。Angular には 2 つのスタイル バインディング命令があります: [ngStyle]、[ngClass]
注意:使用する場合は、[ ] 角括弧で囲む必要があります!

1.[ngStyle]

<any [ngStyle]=“obj”>

手順:

• anyスタイル バインディングのタグ タイプが div、p、span などの任意のタイプであることを表します。
• ここにコード部分を挿入します。ngStyle によってバインドされる値はオブジェクトである必要があります。
• オブジェクト属性は CSS スタイル名で、オブジェクトの値は特定のスタイルです。

簡単な使用法 (html ファイル):

//将这段div的背景色改为绿色
<div [ngStyle]="{&#39;background-color&#39;:&#39;green&#39;}">
xxxx
</div>

複雑な使用法 (html ファイル):

//如果当前页面为主页则将背景色改为绿色，否则改为红色
<div [ngStyle]="{&#39;background-color&#39;:pageName== &#39;homepage&#39; ? &#39;green&#39; : &#39;red&#39; }">
xxxx
</div>

2.[ngClass]

<any [ngClass]=“obj”>

注:

• any はスタイル バインディングのタグ タイプを表し、div、p、span などの任意のタイプを指定できます。
• ngClass によってバインドされる値はオブジェクトである必要があります。
• オブジェクト属性はクラス名、属性値はブール型で、結果は true/false のみです。true の場合はクラスが表示され、それ以外の場合はクラスは表示されません。

簡単な使用法 (html ファイル):

//使用.homepageText样式
<div [ngClass]="{&#39;homepageText&#39;:true}">
xxxx
</div>

複雑な使用法 (html ファイル):

//当页面名称是homepage时使用.homepageText样式，否则不使用
<div [ngClass]="{&#39;homepageText&#39;:pageName ==&#39;homepage&#39;}">
xxxx
</div>

(css ファイル):

.homepageText {    
font-size: 14px;
font-weight: bold;
}

---

解決策:

以下は最初の問題に対する解決策です。インスピレーションを与えていただければ幸いです。

一般的なコード スニペット (変更後):

<div [ngClass]="{&#39;normalTxt&#39;:pageTitle==&#39;portal&#39; ,&#39;specialTxt&#39;:pageTitle==&#39;detail&#39;}">   
   <span>I love angular</span>         
</div>

説明: ポータル ページではnormalTxt の効果を表示し、詳細ページではspecialTxt の効果を表示したいと考えています。 NormalTxt とspecialTxt の特定のスタイルは、対応する .css/.scss ファイルに追加する必要があります。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がAngular 学習スタイル バインディング (ngClass と ngStyle) の使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。