Angualr2.0—常用指令
- 首先使用脚手架创建项目
友情链接：Angular2.0 —构建项目的流程以及使用ng-zorro
- 创建组件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;
}
