Angular -- 基础知识篇

基础知识

1. 创建组件

   ng g component 组件名称

2. 对ts文件下的@Component的使用

   1. 模板 template

      不仅可以配置模板地址templateUrl，还可以配置成template：自定义模板内容

   2. 设置样式 styles

      设置样式不仅可以在@Component下配置styleUrl，还可以直接写styles:[h3{color:blue}]

   3. selector

      • 默认设置方式 selector：'app-servers'

        在使用组件的时候写成<app-servers></app-servers>

      • 属性设置方式 selector：'[app-servers]'

        在使用组件的时候写成<div app-servers></div>

      • 类的设置方式 selector：'.app-servers'

        在使用组件的时候写成<div class="app-servers"></div>

3. 数据绑定

   • ts向html输出数据

     • 差值表达式 {{data}}

       可以绑定函数，属性，还可以对字符串本身进行输出，例如{{‘hello’}} =>hello

     • 属性绑定 [property]="data"

   • ts接收用户事件

     • 事件绑定 (event)="expression"

   • 双向数据绑定 [(ngModel)]="data"

4. 指令

   • 模板的组件指令

   • 结构指令

     • *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>