Angular中指令和管道是什么意思,应用是怎样
导读:今天这篇给大家分享的知识是“Angular中指令和管道是什么意思,应用是怎样”,小编觉得挺不错的,对大家学习或是工作可能会有所帮助,对此分享发大家做个参考,希望这篇“Angular中指令和管道是什么意思,应用是怎样”文章能帮助大家解决问题。...
今天这篇给大家分享的知识是“Angular中指令和管道是什么意思,应用是怎样”,小编觉得挺不错的,对大家学习或是工作可能会有所帮助,对此分享发大家做个参考,希望这篇“Angular中指令和管道是什么意思,应用是怎样”文章能帮助大家解决问题。指令 Directive
指令是 Angular 提供的操作 DOM
的途径。指令分为属性指令
和结构指令
。
属性指令:修改现有元素的外观或行为,使用
[]
包裹。结构指令:增加、删除 DOM 节点以修改布局,使用
*
作为指令前缀。
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 节点 (display)。
div [hidden]="data.length == 0"> 课程列表/div> div [hidden]="data.length > 0"> 没有更多数据/div>
1.3 *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" } }
管道 Pipe
管道的作用是格式化组件模板数据
。
1、内置管道
date 日期格式化
currency 货币格式化
uppercase 转大写
lowercase 转小写
json 格式化 json 数据
{ { date | date: "yyyy-MM-dd" } }
2、自定义管道
需求:指定字符串不能超过规定的长度
!-- 这是一... --> { { '这是一个测试' | 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中指令和管道是什么意思,应用是怎样的介绍啦,需要的朋友可以参考上述内容,希望对大家有帮助,欢迎关注网络,小编将为大家输出更多高质量的实用文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Angular中指令和管道是什么意思,应用是怎样
本文地址: https://pptw.com/jishu/654193.html