Angualr2.0—常用指令

Angualr2.0—常用指令

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

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

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

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

3 编写代码

//html 代码
<button (click)="change()">点击改变</button>
<div class="box" *ngIf="flag"></div>

<ul>
    <li *ngFor="let item of arr">
        <p><span>{{item.name}}</span>****<span>{{item.age}}</span></p>
    </li>
</ul>

<div class="box2" [ngClass]="{aa:flag,bb:flag2}"></div>

<input type="text" [(ngModel)]="value">{{value}}
<div>
    <img [src]="imgUrl" alt="">
    <img [src]="'https://www.baidu.com/img/bd_logo1.png?where=super'" alt="">
</div>

<div>
    <button (click)="hidden()">hidden点击</button>
    <div class="box" [hidden]="flag3"></div>
</div>

// 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;
}