ホームページ > 記事 > ウェブフロントエンド > Angular4の組み込みディレクティブの基本的な使い方について
Angular4の組み込みディレクティブの基本的な使い方について
- 不言オリジナル
- 2018-06-25 10:49:001601ブラウズ
次の記事では主に Angular4 の組み込み命令の基本的な使い方をサンプルコードを通して詳しく紹介していますので、必要な方は以下をご覧ください。
指示は ng の最も強力な機能の 1 つであると言わざるを得ません。その最も強力な機能の 1 つを削除することもできます。
はじめに
NG には多くのカスタム命令が組み込まれているため、自分で車輪を再発明することができないことは誰もが知っています。同時に、ng は、ページ要素タグをよりインスタンス化できるカスタム命令の機能も提供します。
この記事では、各組み込みコマンドの使用法を個別にリストし、デモンストレーションとして例を示します。各組み込みコマンドの基本的な使用法をより速く、より正確に学習できるように、最小限で最も単純な説明を使用するようにしてください。
ngFor
関数: for ループのように、配列から値を繰り返し取得して表示できます。
例:
// .ts
this.userInfo = ['张三', '李四', '王五'];
// .html
<p class="ui list" *ngFor="let username of userInfo">
<p class="item">{{username}}</p>
</p>
説明:
彼の構文は*ngFor="let username of userInfo"で、userInfoは値を取得する配列です。が取得され、ユーザー名は毎回取得される値です。その後、このタグの内容が繰り返し実行され、双方向バインディングを通じてユーザー名が表示されます。 *ngFor="let username of userInfo" ，其中 userInfo 是从中取值的数组，username 是每次从中取出来的值。然后在这个标签里面的内容就会重复执行，并通过双向绑定，将 username 显示出来。
ngIf
作用：根据条件决定是否显示或隐藏这个元素。
例子：
// .html <p *ngIf="false"></p> <p *ngIf="a > b"></p> <p *ngIf="username == '张三'"></p> <p *ngIf="myFunction()"></p>
讲解：
永远不会显示
当 a 大于 b 的时候显示
当 username 等于 张三 的时候显示
根据 myFunction() 这个函数的返回值，决定是否显示
ngSwitch
作用：防止条件复杂的情况导致过多的使用 ngIf。
例子：
// .html <p class="container" [ngSwitch]="myAge"> <p *ngSwitchCase="'10'">age = 10</p> <p *ngSwitchCase="'20'">age = 20</p> <p *ngSwitchDefault="'18'">age = 18</p> </p>
讲解：
[ngSwitch] 先与目标进行绑定，ngSwitchCase 列出每个可能性，ngSwitchDefault 列出默认值。
ngStyle
作用：可以使用动态值给特定的 DOM 元素设定 CSS 属性。
例子：
// .ts
backColor: string = 'red';
// .html
<p [style.color]="yellow">
你好，世界
</p>
<p [style.background-color]="backColor">
你好，世界
</p>
<p [style.font-size.px]="20">
你好，世界
</p>
<p [ngStyle]="{color: 'white', 'background-color': 'blue', 'font-size.px': '20'}">
你好，世界
</p>
讲解：
直接设置颜色为 yellow。
设置背景颜色为 backColor，并可以在 .ts 文件中对 backColor 的值进行修改。
设置字体大小，需要注意的是 只写 font-size 会报错，必须在后面加上 .px。当然 .em .% 都是可以的。
前三种都是只设置一个，写 [ngStyle] 可以同时写多个，使用花括号包住里面的内功。需要注意的是连字符 - 是不允许出现在对象的键名当中的，如果使用 background-color 等时需要加上单引号。
ngClass
作用：动态地设置和改变一个给定 DOM 元素的 CSS类。
例子：
// .scss
.bordered {
border: 1px dashed black;
background-color: #eee;
}
// .ts
isBordered: boolean = true;
// .html
<p [ngClass]="{bordered: isBordered}">
是否显示边框
</p>
讲解：
scss 中设置了样式，相当于你建了一个
class="bordered"- ngIf
-
機能:
条件に基づいてこの要素を表示するか非表示にするかを決定します。
例：
RREEEEEXPLANATION：ユーザー名がZhang Sanと等しい場合に表示
myFunction()関数の戻り値に応じて
ngSwitch
関数:
例:
.html
<p ngNonBindable>
{{我不会被绑定}}
</p>
説明:
[ngSwitch] まずターゲットにバインドし、ngSwitchCase が各可能性をリストし、ngSwitchDefault がデフォルト値をリストします。
動的値を使用して、特定の DOM 要素の CSS プロパティを設定できます。
例:
🎜rrreee🎜🎜🎜🎜説明: 🎜🎜- 🎜🎜色を直接黄色に設定します。 🎜🎜🎜🎜背景色を backColor に設定し、.ts ファイル内の backColor の値を変更します。 🎜🎜🎜🎜フォントサイズを設定します。 font-size だけを記述するとエラーが報告されるので、最後に .px を追加する必要があります。もちろん、.em .% はすべて許容されます。 🎜🎜🎜🎜最初の 3 つは 1 つだけ設定するためのもので、複数の関数を同時に記述する場合は中括弧を使用します。オブジェクトのキー名にハイフン - を使用できないことに注意してください。背景色などを使用する場合は、一重引用符を追加する必要があります。 🎜🎜🎜🎜🎜🎜ngClass🎜🎜🎜🎜🎜機能: 🎜特定の DOM 要素の CSS クラスを動的に設定および変更します。 🎜🎜🎜🎜例: 🎜🎜🎜🎜rrreee🎜🎜🎜🎜説明: 🎜🎜
- 🎜🎜 scss でスタイルを設定することは、
class= " を構築することと同じです。ボーダー付き" 。 🎜🎜🎜🎜ts には、.scss 内のスタイルを表示するかどうかを決定するために使用される新しい isBowned があります。 🎜🎜🎜🎜htmlでは枠線が表示されているかどうかの判断基準としてisBorderを使用しています。 🎜🎜🎜🎜🎜🎜ngNonBindable🎜🎜🎜🎜🎜機能: 🎜ページの特定の部分をバインドしないように Angular に指示します。 🎜🎜🎜🎜例: 🎜🎜🎜🎜rrreee🎜🎜🎜🎜説明: 🎜🎜🎜🎜ngNonBindableを使用すると、中括弧が文字列としてまとめて表示されます。 🎜🎜🎜🎜概要🎜🎜🎜🎜日常の開発ではngForとngIfが最もよく使われるので最初に書きます。 ngNonBindable については、実際の開発では一度も使用したことがなく、情報を確認してテストしただけなのでメモします。 🎜🎜上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 🎜🎜関連する推奨事項: 🎜🎜🎜AngularJs でテンプレート キャッシュを無効にする方法🎜🎜🎜🎜🎜 angularJs でブラウザ キャッシュをクリアする方法🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜以上がAngular4の組み込みディレクティブの基本的な使い方についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。