Angular基础小知识

1.angular的脚手架的安装

npm(cnpm) i @angular/cli -g    //安装脚手架

ng new 项目名   //创建项目(默认会进行npm install)

ng new 项目名 --skip-install  //创建项目但是不安装依赖 

2.ng添加组件，默认根目录是在app目录下

           

ng g component (组建的目录路径/)名字  //新增组件 ()里面表示可选 推荐是components/名字

例子： ng g component components/home //新增home组件，在components目录下

3.ng定义属性,ts的语法

4.绑定数据，绑定属性，绑定html，数据循环，条件判断，ngClass，ngStyle，事件，管道，本地图片加载，ngSwitch

(1) <p>{{title}}</p> //数据绑定

(2) <p [title]="innerTitle">测试属性</p>  //属性绑定,用[],表示是变量

(3) <p [innerHTML]="htmlStr">绑定html</p>  //html绑定

(4) <span *ngFor="let item of arr; let key=index">{{key}}----{{item}}</span> //数据循环 ngFor  item表示循环的对象，key表示数组的索引 都是自定义的名字

(5) <p *ngIf="flag">条件判断</p>  //条件判断, flag为true就展示, 会删除dom

(6) <p [hidden]="flag">隐藏</p> //条件判断, flag为true表示隐藏，不会删除dom，类似display:none

(7) <p [ngClass]="{'red': flag, 'blue': !flag}">测试ngClass</p> //ngClass 对样式进行赋值 格式可以是string,array和object,上面是object例子

(8) <p [ngStyle]="{'color': 'orange', 'font-size': fz }">ngStyle</p> //ngStyle 有''表示是字符串,没有表示是变量

(9) <button (click)="alertMsg($event)">事件处理</button> //事件用()表示，里面可以传事件$event对象

(10) <p>{{ myTime | date: "yyyy-MM-dd HH:mm:ss" }}</p> //管道，类似于filter, date是内部就有的

(11) <img src="assets/images/01.png" alt=""> //本地图片加载

(12) ngSwitch的操作类似switch语句，status=1时候展示11，status=3展示默认就是33

  <div [ngSwitch]="status">
    <p *ngSwitchCase="status===1">
      11
    </p>
    <p *ngSwitchCase="status===2">
      22
    </p>
    <p *ngSwitchDefault>
      33
    </p>
  </div>

5.双向绑定，一般用于form表单，要在app.module.ts引入FormsModule，如下图

<input type="text" [(ngModel)]="userName"> {{userName}}

//使用方法就是[(ngModel)]绑定到变量