Angular中什么叫命令、管路、服务项目？下边本文带大家了解一下Angular里的命令、管路和服务项目，希望能帮助到大家！
1. 命令 Directive
命令是 Angular 所提供的实际操作 DOM 的路径。命令分成特性命令材料结构命令。【有关实例教程强烈推荐：《angular教程》】
特性命令：改动目前原素外观和行为，应用 [] 包囊。
构造命令：提升、删掉 DOM 连接点以改动合理布局，应用*做为命令作为前缀
1.1 内嵌命令
1.1.1 *ngIf
依据标准3D渲染 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>
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"
}
}2. 管路 Pipe
管路作用是格式化硬盘部件模版数据信息。
2.1 内嵌管路
date日期格式化硬盘currency贷币格式化硬盘uppercase转大写lowercase转小写字母json格式化硬盘json数据信息
<p>{{ date | date: "yyyy-MM-dd" }}</p>2.2 自定管路
要求：特定字符串数组不可以超出范围长度
// 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]
});3. 服务项目 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) {}
}3.2 提供服务的修饰符
应用服务项目能够真正实现跨控制模块跨部件共享信息，主要取决于提供服务的修饰符。
在根注入器中注册服务，任何控制模块应用同一个服务项目实例对象
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
创作者：浅忆_0810
大量程序编写基本知识，请访问：编程视频！！
以上就是关于深层次浅谈Angular里的命令、管路和提供服务的具体内容，大量欢迎关注AdminJS其他类似文章！