閱讀記錄

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 來獲取完整的響應對象

Angular權威指南 依賴注入

• 嘗試注入器

import {Component, OnInit, ReflectiveInjector} from '@angular/core';
@Component({
  selector: 'app-test-di',
 template: `
 <button (click)="invokeService()">getValue</button>
 `,
 styles: [
  ]
})
export class TestDiComponent implements OnInit {
  myservice:Myservice;
 constructor() {
    let injector:any = ReflectiveInjector.resolveAndCreate([Myservice]);//數組中爲可注入物
 this.myservice = injector.get(Myservice);
 console.log('Same instance?',this.myservice===injector.get(Myservice));//注入的是單例對象
 }
  ngOnInit(): void {
  }
  invokeService() {
    console.log('My service retured',this.myservice.getValue());
 }
}
//因爲使用了本身的注入器，咱們不須要把myservece假如NgModule的providers裏面
class Myservice {
  getValue():string{
    return "hello world"
 }
}

• 用ngModule提供依賴

constructor(private service:Myservice) {
}
ngOnInit(): void {
}
invokeService() {
  console.log('My service retured',this.service.getValue());
}

//想讓Myservice在整個Module中都能被注入
providers: [
    Myservice，
    {provide:Myservice,useClass:Myservice}  //provide爲令牌，惟一標記這個注入對象。useClass用來指出注入什麼，怎麼注入
],

• 使用工廠注入：被注入對象須要參數