基础知识
-
创建组件
ng g component 组件名称
-
对ts文件下的@Component的使用
-
模板 template
不仅可以配置模板地址templateUrl,还可以配置成template:
自定义模板内容
-
设置样式 styles
设置样式不仅可以在@Component下配置styleUrl,还可以直接写styles:[
h3{color:blue}
] -
selector
-
默认设置方式 selector:'app-servers'
在使用组件的时候写成<app-servers></app-servers>
-
属性设置方式 selector:'[app-servers]'
在使用组件的时候写成<div app-servers></div>
-
类的设置方式 selector:'.app-servers'
在使用组件的时候写成<div class="app-servers"></div>
-
-
-
数据绑定
-
ts向html输出数据
-
差值表达式 {{data}}
可以绑定函数,属性,还可以对字符串本身进行输出,例如{{‘hello’}} =>hello
-
属性绑定 [property]="data"
-
-
ts接收用户事件
-
事件绑定 (event)="expression"
-
-
双向数据绑定 [(ngModel)]="data"
-
-
指令
-
模板的组件指令
-
结构指令
-
*ngFor
<li *ngFor = "let item of array; index as i"> {{i}} - {{index}}</li>/*或者*/<li *ngFor = "let item of array; let i = index"> {{i}} - {{index}}</li>
-
*ngIf 简单形式
<div *ngIf = "condition">...</div> <ng-template [ngIf]="condition"><div>...<div></ng-template>
使用else块
<div *ngIf = "condition; else elseBlock" >... </div > <ng-template #elseBlock>... </ng-template >
使用then和else块
<div * ngIf = "condition; then thenBlock else elseBlock" > </div > <ng-template #thenBlock>... </ng-template > <ng-template #elseBlock>... </ng-template >
使用as语法
<div *ngIf = "condition as value; else elseBlock">{{value}} </div > <ng-template #elseBlock>... </ng-template >
-
-
属性指令
-
ngStyle
基本用法
<div [ngStyle]="{'background-color':'green'}"></div>
判断添加
<div [ngStyle]="{'background-color':username === 'han' ? 'green' : 'red' }"></div>
使用函数判断
<div [ngStyle]="{'background':setNameLineClass(data.status)}"></div>
-
ngClass
第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类
基本用法
[ngClass]="{'text-success':true}"
判断
[ngClass]="{'text-success':username == 'han'}" [ngClass]="{'text-success':index == 0}"
函数
<tr [ngClass]="chooseTrClass(data)">
-
ngfor
<li *ngFor = "let item of mailService.titleArray; index as i;"> {{i}} - {{item}} </li>
-
-