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 m