Angular基本指令与语法

循环指令

<any *ngfor="let tmp of list;let myindex=index">
</any>

选择指令

<any *ngif="表达式"></any>

注意事项

//*ngfor和*ngif同时放在一个标签使用
//会报错
//解决方案： ng-container

多重分支判断

<div [ngswitch]="answer">
  <p *ngswitchcase="'a'"></p>
  <p *ngswitchcase="'b'"></p>
  <p *ngswitchdefault>其它答案</p>
</div>

事件绑定

<button (click)="handleClick()"></button>

属性绑定

<img [src]="imgurl"/>

<h1 [ngstyle]="{color:mycolor}"></h1>

<h1 [ngclass]="{myhightlight:true}"></h1>

双向数据绑定

//①指定当前模块 依赖于 formsmodule(ngmodel是属于formsmodule)

import {formsmodule} from '@angular/forms'
@ngmodule({
  imports:[formsmodule]
})

//②调用指令
<input [(ngmodel)]="uname"/>

自定义指令

//创建自定义指令
import {directive，input,elementRef} from '@angular/core'
@directive({
 selector:['test']
})
export class testdirective{
//①指定谁调用了指令
//②拿到调用指令时 所指定的数据
  @input() test="";
  constructor(private el:elementRef){
    //this.el
  }
}

//调用
//①声明和组件的声明是一样的
//②<h1 test="123"></h1>

创建组件

import {component} from '@angular/core'

@component({
    selector: 'demo01',
    template: ``，
    templateurl: '',
     styleurls: ['assets/css/***.css'],
    providers: [myhttpservice]
})

export class demo01component{
}

使用组件

//找到模块app.module.ts

import {demo01component} from 
'./demo01/demo01.component'

@ngmodule({
  delcarations: [demo01component]
})

过滤器(管道)

//语法：多重过滤 传递参数
<any>
{{表达式 | 管道1:arg1:arg2 | 管道2}}
</any>

内置管道

//uppercase
//lowercase
//date
{{new date() | date:'yy-mm-dd hh:mm:ss'}}
//number
{{3.1415926 | number:3.2-2}}
//slice
{{"hello world" | slice:3:6}}

自定义管道

//创建
import {pipe,pipetransform} from '@angular/core'

@pipe({
  name:'mycurrency'
})

export class mycurrencypipe implements pipetransform{
   transform(value:any,...args){
      return 操作后的结果
   }
}

//使用 要到模块中声明
import {mycurrencypipe} from '***'

@ngmodule({
 delcarations:[mycurrencypipe]
})