この記事では、angular のディレクティブとパイプを理解し、関連する知識ポイント (組み込み命令とカスタム命令、組み込みパイプとカスタム パイプ) を簡単に紹介します。役に立ってください！
ディレクティブは、DOM を操作するために Angular によって提供される 方法です。命令は、属性命令と構造命令に分かれています。
#属性ディレクティブ: 既存の要素の外観や動作を変更するには、[] を使用して要素をラップします。
構造命令: DOM ノードを追加および削除してレイアウトを変更します。命令プレフィックスとして # を使用します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
1. 組み込みの命令
##1.1 *ngIf
に基づいて DOM ノードをレンダリングするか、 DOM ノードを削除します。
<div *ngIf="data.length == 0">没有更多数据</div>
<div *ngIf="data.length > 0; then dataList else noData"></div> <ng-template #dataList>课程列表</ng-template> <ng-template #noData>没有更多数据</ng-template>
ng-template はテンプレートの定義に使用されます。ng-template を使用してテンプレートを定義した後、ng-containerおよび templateOutlet ディレクティブを使用します。
<ng-template #loading> <button (click)="login()">login</button> <button (click)="sigup()">sigup</button> </ng-template> <ng-container *ngTemplateOutlet="loading"> </ng-container>
1.2 [hidden]
DOM ノードを表示、または 非表示 DOM ノード ## ＃ （画面）。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><div [hidden]="data.length == 0">课程列表</div>
<div [hidden]="data.length > 0">没有更多数据</div></pre><div class="contentsignin">ログイン後にコピー</div></div>
*ngForデータをトラバースして HTML 構造を生成します
interface List {
id: number
name: string
age: number
}
list: List[] = [
{ id: 1, name: "张三", age: 20 },
{ id: 2, name: "李四", age: 30 }
]<li
*ngFor="
let item of list;
let i = index;
let isEven = even;
let isOdd = odd;
let isFirst = first;
let isLast = last;
"
>
</li><li *ngFor="let item of list; trackBy: identify"></li>
identify(index, item){
return item.id;
}2. カスタマイズコマンド要件: 要素のデフォルトの背景色、マウスが移動したときの背景色、およびマウスが移動したときの背景色を設定します。
<div [appHover]="{ bgColor: 'skyblue' }">Hello Angular</div>import { AfterViewInit, Directive, ElementRef, HostListener, Input } from "@angular/core"
// 接收参的数类型
interface Options {
bgColor?: string
}
@Directive({
selector: "[appHover]"
})
export class HoverDirective implements AfterViewInit {
// 接收参数
@Input("appHover") appHover: Options = {}
// 要操作的 DOM 节点
element: HTMLElement
// 获取要操作的 DOM 节点
constructor(private elementRef: ElementRef) {
this.element = this.elementRef.nativeElement
}
// 组件模板初始完成后设置元素的背景颜色
ngAfterViewInit() {
this.element.style.backgroundColor = this.appHover.bgColor || "skyblue"
}
// 为元素添加鼠标移入事件
@HostListener("mouseenter") enter() {
this.element.style.backgroundColor = "pink"
}
// 为元素添加鼠标移出事件
@HostListener("mouseleave") leave() {
this.element.style.backgroundColor = "skyblue"
}
}をフォーマットすることです。
日付形式
currency 通貨の書式設定
# json 形式 json データ
{{ date | date: "yyyy-MM-dd" }}要件: 指定された文字列は指定された長さを超えることはできません <!-- 这是一... -->
{{'这是一个测试' | summary: 3}}ログイン後にコピー// summary.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'summary'
});
export class SummaryPipe implements PipeTransform {
transform (value: string, limit?: number) {
if (!value) return null;
let actualLimit = (limit) ? limit : 50;
return value.substr(0, actualLimit) + '...';
}
}ログイン後にコピープログラミング関連の知識については、// app.module.ts
import { SummaryPipe } from './summary.pipe'
@NgModule({
declarations: [
SummaryPipe
]
});ログイン後にコピー
をご覧ください。 ！
以上がAngular 学習で命令とパイプラインについて語るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
