阅读记录

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: `
 
 `,
 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用来指出注入什么,怎么注入
],
  • 使用工厂注入:被注入对象需要参数

你可能感兴趣的