Angular の命令、パイプ、サービスとは何ですか?次の記事では、Angular の手順、パイプライン、サービスについて説明します。お役に立てば幸いです。
ディレクティブ
ディレクティブは、Angular
によって提供される操作です。 DOM
パス。命令は属性命令と構造命令に分かれます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
属性の説明: 既存の要素の外観または動作を変更し、[]
パッケージを使用します。
構造命令: レイアウトを変更するには、DOM
ノードを追加および削除します。命令プレフィックスとして # を使用します。
#1.1 ビルド済み-in 命令
1.1.1 *ngIf
条件に基づいたレンダリングDOM
ノードまたは削除 DOM
Node
<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>
1.1.2 [hidden]
に従って表示条件 DOM
ノードまたは非表示DOM
ノード(display
)
<div [hidden]="data.length === 0">没有更多数据</div>
1.1.3 *ngFor
データを走査して HTML 構造を生成する
interface List { id: number name: string age: number } list: List[] = [ { id: 1, name: "张三", age: 20 }, { id: 2, name: "李四", age: 30 } ]
<!-- i: 索引 isEven: 是否为偶数行 isOdd: 是否为奇数行 isFirst: 是否是第一项 isLast: 是否是最后一项 --> <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; }
1.2 カスタム手順
要件: のデフォルトの背景色を設定します。マウスが移動したときの要素 背景色と移動時の背景色
<div [appHover]="{ bgColor: 'skyblue' }">Hello Angular</div>
カスタム命令の作成
$ ng g d appHover # 全称 ng generate directive
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" } }
Pipe
#2.1 組み込みパイプライン
データ<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><p>{{ date | date: "yyyy-MM-dd" }}</p></pre><div class="contentsignin">ログイン後にコピー</div></div>
要件: 指定された文字列は、指定された長さを超えることはできません// 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 : 10;
return value.substr(0, actualLimit) + '...';
}
}
// app.module.ts
import { SummaryPipe } from './summary.pipe'
@NgModule({
declarations: [SummaryPipe]
});
Service
3.1 サービスの作成$ ng g s services/TestService --skip-tests
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TestService { }
export class AppComponent {
constructor (private testService: TestService) {}
}
サービスをルート インジェクターに登録します。すべてのモジュールが同じサービス インスタンス オブジェクトを使用します
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class CarListService { }
サービスをモジュール レベルで登録します。このモジュール すべてのコンポーネントは同じサービス インスタンス オブジェクトを使用します
import { Injectable } from '@angular/core'; import { CarModule } from './car.module'; @Injectable({ providedIn: CarModule, }) export class CarListService { }
import { CarListService } from './car-list.service'; @NgModule({ providers: [CarListService], }) export class CarModule { }
import { Component } from '@angular/core'; import { CarListService } from '../car-list.service.ts' @Component({ selector: 'app-car-list', templateUrl: './car-list.component.html', providers: [ CarListService ] })
元のアドレス: https://juejin.cn/post/7008357218210807838
プログラミングビデオ
プログラミング関連の知識については、こちらをご覧ください。 :! !
以上がAngular のディレクティブ、パイプ、サービスの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。