Angular2.0—管道

Angular2.0—管道

1. 首先使用脚手架创建项目

友情链接：Angular2.0 —构建项目的流程以及使用ng-zorro

2. 创建组件home

友情链接：Angular2.0—路由跳转

3 .编写代码
管道：对变量的修饰和补充
{{ 变量名称 | 管道名称 | 管道名称 }}

//  Angular内置了一些管道，比如DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。 它们全都可以直接用在任何模板中。
// home.html
<div class="tab">
    <p>{{msg}}</p>
    <a href="###" [routerLink]="['/news/child']" routerLinkActive='active' [queryParams]="{'id':1}">child</a>
    <p>转为大写管道：{{abs | uppercase}}</p>
    <p>转为小写管道：{{abs2 | lowercase}}</p>
    <p>时间转为标准：{{date | date:'yyyy/dd/MM'}}</p>
    <p>时间转为标准：{{date | date:'yyyy-dd-MM'}}</p>
    <p>小数转化为百分比：{{num2 | percent}}</p>
    <p>货币: {{num2 | currency:'￥'}}</p>
</div>

// home.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  msg;
  title = "我是父组件传给子组件的值";
  abs = "acdasd";
  abs2 = "ACDASD";
  date = new Date();
  num = 0.23;
  num2 = 100;
  constructor() { }

  ngOnInit() {
  }
  fu(e){
    console.log(e)
    this.msg = e;
  }
}