关于angular:阅读记录

1. Angular ElementRef 简介 (完)

• ElementRef 咱们就能够封装不同平台下视图层中的 native 元素 (在浏览器环境中，native 元素通常是指 DOM 元素)
• console.dir() 能够显示一个对象的所有属性和办法
• 操作 dom 第一种办法

constructor(private elementRef: ElementRef) {
// 先获取 my-app 元素，而后利用 querySelector API 就能获取页面中 div 元素
 let divEle = this.elementRef.nativeElement.querySelector('div');
 console.dir(divEle);
 }

• 操作 dom 第二种办法

 @ViewChild('greet')
 greetDiv: ElementRef;
 ngAfterViewInit() {this.greetDiv.nativeElement.style.backgroundColor = 'red';}

• 操作 dom 第三种办法：跨平台

constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
 ngAfterViewInit() {
 // this.greetDiv.nativeElement.style.backgroundColor  = 'red';
 this.renderer.setStyle(this.greetDiv.nativeElement, 'backgroundColor', 'red');
 }

2. Angular 6 HttpClient 疾速入门 (未完)

• 设置查问参数办法

https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10

//HttpParams 对象是不可变的, 想要操作的话要保留 set 的返回值。也能够应用链式语法
const params = new HttpParams().set("_page", "1").set("_limit", "10");
const params = new HttpParams({fromString: "_page=1&_limit=10"});
const params = new HttpParams({fromObject: { _page: "1", _limit: "10"} });

this.http.get("https://jsonplaceholder.typicode.com/todos",{params})

• options 的参数

options: {headers?: HttpHeaders | {[header: string]: string | string[]},
    observe?: 'body' | 'events' | 'response',
    params?: HttpParams|{[param: string]: string | string[]},
    reportProgress?: boolean,
    responseType?: 'arraybuffer'|'blob'|'json'|'text',
    withCredentials?: boolean,
  }
// options 对象的 observe 属性值为 response 来获取残缺的响应对象