>首页> IT >

angular学习之聊聊指令和管道

时间:2022-05-17 10:11:07       来源:转载
本篇文章带大家了解一下angular中的指令(Directive)和管道(Pipe),简单介绍一下相关知识点:内置指令和自定义指令,内置管道和自定义管道,希望对大家有所帮助!

指令 Directive


指令是 Angular 提供的操作 DOM 的途径。指令分为属性指令结构指令

属性指令:修改现有元素的外观或行为,使用 []包裹。

结构指令:增加、删除 DOM 节点以修改布局,使用*作为指令前缀。【相关教程推荐:《angular教程》】

1、内置指令

1.1 *ngIf

根据条件渲染DOM 节点或移除DOM 节点。

没有更多数据
课程列表没有更多数据

ng-template是用来定义模板的,当使用 ng-template定义好一个模板之后,可以用 ng-containertemplateOutlet指令来进行使用。

  

1.2 [hidden]

根据条件显示DOM 节点或隐藏DOM 节点 (display)。

课程列表
没有更多数据

1.3 *ngFor

遍历数据生成HTML结构

interface List {  id: number  name: string  age: number}list: List[] = [  { id: 1, name: "张三", age: 20 },  { id: 2, name: "李四", age: 30 }]
  • identify(index, item){  return item.id; }

    2、自定义指令

    需求:为元素设置默认背景颜色,鼠标移入时的背景颜色以及移出时的背景颜色。

    Hello Angular
    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.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 : 50;        return value.substr(0, actualLimit) + "...";    }}
    // app.module.tsimport { SummaryPipe } from "./summary.pipe"@NgModule({    declarations: [      SummaryPipe    ] });

    更多编程相关知识,请访问:编程视频!!

    以上就是angular学习之聊聊指令和管道的详细内容,更多请关注php中文网其它相关文章!

    关键词: 背景颜色 相关文章 这是一个