Angular核心基础回顾

一.TypeScript中的Interface

Interface接口用来作为对共性的抽象描述。类型很重要，Interface在TypeScript中很重要的作用之一就是类型命名。

1.使用举例

• 定义接口

  interface Person {
      firstName: number,
      lastName: string,
      kids: number
  }
  

• 指定实例

  var p: Person = {
      firstName: "Jack",
      lastName: "Wang",
      kids: 1,
      age: 23 //这里会提示报错
  }
  

2.定义可选属性

• 在属性后面添加属性名 ?: 类型表示此属性可有可无

• 实例

  interface Person {
      firstName: number,
      lastName: string,
      kids?: number
  }
  

  • 此时kids属性就是可选属性

3.定义只读属性

• 在属性前面添加readonly表示实例化属性值后不能再进行修改

• 实例

  interface Person {
      firstName: number,
      lastName: string,
      readonly kids: number
  }
  

  • 此时kids属性就是只读属性，必须初始化，初始化后不能进行修改

4.使用Interface定义函数类型

• 实例

  //定义函数接口
  interface AddFunction {
      (x:number, y:number):number;//入参是number类型的,返回值也是number类型的
  }
  //使用函数
  add: AddFunc = (x, y) => x + y;
  

• 使用interface定义函数类型可以规范函数的入参和返回值内容

5.使用Interface定义字典类型

• 实例

  //定义字典接口
  interface Dict {
      [key: string]: string; //字典的键是字符型,值也是字符型
  }
  //使用字典接口
  dict: Dict = {
      a: '1',
      b: '2' 
  }
  

• 定义字典类型的接口主要用于规范对象中的索引与值，如上代码可以使用this.dict.a获得a索引的值

6.手机真机调试

• 真机调试方法
  • 确保手机和电脑处于同一Wifi
  • Mac使用ifconfig查看192开头的IP地址
  • ng serve --host 0.0.0.0
  • 手机浏览器打开http://<电脑IP>:4200

二.ngFor指令

1.变量的应用范围

• 在指定ngFor属性标签的内部使用循环的元素

2.索引的获取

• 通过<li *ngFor="let menu of menus; let i=index">{{i}}</li>的方式获取index下标

3.获得第一个元素和最后一个元素

• 通过<li *ngFor="let menu of menus; let f=first; let l=last"></li>的方式获得first第一个元素和last最后一个元素
• 其中first和last是boolean值，表示是否是第一个即是否是最后一个元素，如果是则为true，否则为false

4.获得第奇数个或偶数个【注意是数组的索引】

• 通过<li *ngFor="let menu of menus; let o = odd; let e = even"></li>的方式获得奇数或是偶数个
• 其中odd表示是否是奇数、even表示是否是偶数，同样是boolean值
• 注意：其中的odd和even都是数组索引判断的，即第一个元素的索引下标是even偶数0，以此类推

5.提升性能

• 通过<li *ngFor="let menu of menus; trackBy:trackElement"></li>的方式提升索引性能，其中trackElement可以为一个函数或是一个表达式

• 通过trackBy获得数组中可以唯一表达某个元素的值，通过这个元素的值进行渲染和排序。简单理解就是可以将使用到的数组元素的值作为trackBy的值，如下：

  <li *ngFor="let menu of menus; let i = index; trackBy: menu?menu.title:null;">
  	{{menu.title}}
  </li>
  <!-- 这里由于menu可能有可能没有所以使用三元表达式如果menu存在的话则通过menu.title值[由于使用到了menu.title]作为提升性能的标准 -->
  

• 数组比较小时无法观察性能的提升，当数组比较大时可以线束看到数组的提升

三.事件的处理和样式绑定

• [class.样式类名]="判断表达式"是在应用单个class时的常用技巧

• 使用方括号[]是数据绑定，如果带方括号，等号后面就是一个对象或表达式

• 不使用方括号，等号后面Angular认为是一个字符串，但如果我们此时在等号后使用{{}}就是和方括号等效的

• 圆括号()用于事件绑定，等号后可以接表达式也可以是一个定义在类中的函数

• 实例代码

  <a 
     href="#"
     [class.active]="selectedIndex === i"
     (click)="selectIndex = i">
      {{menu.title}}
  </a>
  

  • 表示当点击的时候将selectIndex值设为i，由于满足的class.active条件，则会有active样式

四.组件封装

1.组件封装的意思和方法

• 封装组件主要用于重用代码/简化逻辑
• 使用ng g component 组件名(驼峰形式)构建组件，生成的组件是以驼峰形式命名的Component类名和以小写方式【中间驼峰变成-+小写】的形式命名的文件名
• 使用index.ts方便导入以及隔离内部变化对外部的影响【最好每一层文件都要有】
  • 在每一个Component文件夹下添加index.ts文件，并在其中添加export * from './xx.component'
  • 在components目录下可以通过export * from './xx[包名]'的方式导出components下的所有组件
  • 引用的时候可以使用 import { xxComponent } from './components',因为components层已经通过exports导出当前文件夹下的所有Components

五.ngIf指令

1.ngIf基本使用显示匹配内容

<div *ngIf="条件表达式">
    在条件为真的时候需要显示的内容
</div>

2.使用ngIf联合else显示内容

<div *ngIf="条件表达式 else elseContent">
    在条件为真的时候需要显示的内容
</div>
<ng-template #elseContent>
	在条件为假的时候需要显示的内容
</ng-template>

3.使用then/else方式联合ng-template显示内容

<div *ngIf="条件表达式;then thenTemplate;else elseTemplate"></div>
<ng-template #thenTemplate>
	在条件为真的时候需要显示的内容
</ng-template>
<ng-template #elseTemplate>
	在条件为假的时候需要显示的内容
</ng-template>

六.组件的输入输出

1.输入属性

• 通过@Input() 属性名:属性类型的方式设置组件的输入属性
• 在调用组件时指明属性名即值即可

2.输出属性

• 通过@Output() 事件名 = new EventEmitter<输出类型>()的方式定义输出属性
• 通过事件名.emit(输出内容)的方式输出指定内容
• 调用组件时通过<组件名 (事件名)="方法名($event输出内容)"></组件名>$event的方式通过方法参数获取输出值

七.样式绑定的几种方式

1.class.className

• class.className对于单个样式的条件绑定最为合适

  <div [class.className]="条件表达式">
      ...
  </div>
  

2.ngClass

• ngClass是自由度和扩展性最强的样式绑定方式

  <div [ngClass]="{'One':true, 'Two':true, 'Three':false}">
      ...
  </div>
  

3.ngStyle

• ngStyle由于是嵌入式样式，它会覆盖掉其他样式，使用时要谨慎

  <div [ngStyle]="{'color':someColor, 'font-size':fontSize}">
      ...
  </div>