angular中什么是指令、管道、服务？下面本篇文章带大家了解一下angular中的指令、管道和服务，希望对大家有所帮助！
1. 指令 directive指令是 angular 提供的操作 dom 的途径。指令分为属性指令和结构指令。【相关教程推荐：《angular教程》】
属性指令：修改现有元素的外观或行为，使用 [] 包裹。
结构指令：增加、删除 dom 节点以修改布局，使用*作为指令前缀
1.1 内置指令
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>
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.tsimport { 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.tsimport { summarypipe } from './summary.pipe'@ngmodule({ declarations: [summarypipe] });
3. 服务 service3.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中的指令、管道和服务的详细内容。