Angualr2.0—常用指令

Angualr2.0—常用指令

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

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

2. 创建组件home，以及编写路由

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

3 编写代码

//html 代码
点击改变



    

        
{{item.name}}****{{item.age}}
    




{{value}}

    
    



    hidden点击
    

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  flag = true;
  flag2 = false;
  flag3 = false;
  imgUrl = "https://www.baidu.com/img/bd_logo1.png?where=super";
  arr = [
    {'name':'tom','age':20},
    {'name':'tom1','age':21},
    {'name':'tom2','age':22},
  ];
  value = 1;

  constructor() { }

  ngOnInit() {
  }
  change(){
    this.flag = !this.flag;
    this.flag2 = !this.flag2;
  }
  hidden(){
    this.flag3 = !this.flag3;
  }
}

// css 代码
.bb{
    width: 50px;
    height: 50px;
    background:red;
}
.aa{
    width: 50px;
    height: 50px;
    background:blue;
}