angular + typescript一些知识点

RestFul

常用方法：
1. 在app.module.ts中
-import {HttpClientModule} from “@angular/common/http”;
-在@NgModule中的imports部分加入HttpClientModule
2. 在service.ts文件中
-import {HttpClient, HttpParams} from “@angular/common/http”;
-在service类的构造函数中申明此服务

 constructor(private http:HttpClient){
  }

此后就可以使用this.http.get等各种函数。

一个简单的service文件示例

import {Injectable, Input} from "@angular/core";
import {HttpClient} from "@angular/common/http";

import {map} from 'rxjs/operators';
import {Observable} from "rxjs/index";

@Injectable()
export class JasonService{
  constructor(private http:HttpClient){
  }

  getJasonData(id:string): Observable<any>{
    return this.http.get(`localhost:9090/accountId/${id}`);
  }
 }

如此之后，在ts文件中就可进行申明及使用

export class demoClass implements OnInit {

    ngOnInit(){}
    constructor(private jasonService:JasonService) {
    }

    newFunction(){
        this.jasonService.getJasonData(id).subscribe(data => {console.log(data)});
    }
}

常用的http服务：
- http.get：通过某个url获取数据
- http.post：向某个url发送数据，发送的数据放在body中，直接将json格式的body作为参数传入即可，无需转化为string，否则会被转为text形式，后端不易解析
例如：

let body={name:name_var, value: value_var};
this.http.post(url, body).subscribe(data => {});

• http.delete：使用某个url删除某条记录，没有body参数

notice: 无论哪种操作，如果只是调用http.get/post/delete而不调用subscibe，这个消息实际上并不会被执行。也就是说如果我们只是调用this.http.delete(url)而不在之后调用subscribe，这个消息实际上并不会被执行。
解决的问题：调用了http.get/http.delete/http.post但后台并没有接收到这条消息，或者说前台并没有发送这条消息的原因。

具体解释：

Http uses rxjs and is a cold/lazy observable, meaning that you should subscribe to it to make it work.

也就是说http服务是一个异步操作，或者说lazy observable，这就意味着只有调用subscribe才能让这个操作执行。

ngClass

使用[ngClass]可以定义较复杂的条件语句来指定内容的类，示例：

[ngClass]="selectedAttributes.includes(attrName)?'tagAttr':'commonAttr'"

notice：后面指定的类名需要加单引号，才能成功生成对应的class，例如’tagAttr’。

ngModel

[(ngModel)]=”selectedOne” 动态进行变量绑定， 页面的数据变化能够实时更新到对应的变量上，同时变量值的改变也会在页面上得到反映。所以这是一种双向绑定。

push vs contact

• array.push(a)会将a加入array中, array.push(array2)会将array2作为整体拼接在array最后
  a. 例如array[1,2,3] array.push(4)则array变成[1,2,3,4]
  b. array2=[4] array.push(array2)则会将array变成[1,2,3,[4]]

• array1.concat(array2)用于将array2拼接在array1后面并返回新数组,但不会改变原有两个array的内容

TypeScript

1. 字符新特性
    a. 多行字符串：使用``包含的字符串可以直接换行，形成的字符串自带\n
    b. 变量引用：${var_name}
    c. 字符串自动拆分：以``包含的字符串可以进行自动拆分，分成templateStringArray以及对应的各个变量
2. 参数新特性
    a. 类型批注：参数名称后面使用冒号指定参数类型 (string, number, boolean, 方法类型void)，variableName:type，从而在赋值时会进行类型检查。可以定义一个类，然后使用类名定义变量的类型。
    b. 类型推断机制：即使没有显式地类型批注，第一次赋值时会进行类型推断，如果在之后的赋值中赋予新的类型，则会报错。如果确实想要让一个变量有多个类型，可以显式地定义为any类型。
    c. 参数默认值设定：直接使用等号给参数赋予默认值，在调用时就可以省略。带默认值的参数一定要声明在参数列表的尾部。
    d. 可选参数：在参数后添加问号?来说明参数是否可选。必选参数不得声明在可选参数后面，有可选参数时需要处理如果可选参数没有的情况。
3. Rest and Spread: 使用“...args”来表示任意数量的参数