阅读记录

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用来指出注入什么，怎么注入
],

• 使用工厂注入：被注入对象需要参数