Angular 服务对象的作用范围

1.高阶话题：服务对象的作用范围

声明服务提供者的方式：

方式1：在根模块中提供服务对象-----在整个应用中服务是单例

@Injectable({ providedIn:'root' })

export class TimerService{    }

方式2：在组件中提供服务对象----在每个组件实例中服务都是有一个实例的

@Injectable()

export class TimerService{    }

----------------------------------------

@Component({

.....

providers:{ TimerService }

}）

export class LoginComponent{       }

注意：项目中只要服务对象中有属性，只能用方式2；否则推荐使用方式1

2. 面试严重加分项：TypeScript

Angular从V2.x开始使用TS编写；Vue.js从V3开始使用TS编写；

中文网：http://www.tslang.cn

TS是由微软编写的一门基于JS又高于JS的编程语言。

浏览器不支持TS，其使用步骤:

1.下载TS的编译器

npm i -g typescript

2.编写.ts文件，使用编译器转化为.js

tsc  hello.ts

//得到hello.js

TS学习手册：

https://www.tslang.cn/docs/handbook/basic-types.html

TS的扩展特性：

1.TS是强类型语言 ------JS是弱类型语言

强类型语言的特点：变量、形参、函数都要声明类型

uname:string

f1( n1:number ):boolean{

return true

}

常用的数据类型关键字:string/number/boolean/any/number[]/Object/Date/void

2.TS对属性和方法成员定义三种访问修饰符：

private:私有的，私有成员只能在本类内部使用

protected:被保护的，被保护的成员只能在本类内部及子类内部使用

public:公共的，公共成员可以在本类内部以及外部使用

提示：一般情况下，class内属性不应该让外界随便访问，通常设置为private;

方法一般允许调用的，通常设置为public

3.访问修饰符的特殊用法

下述两种用法的作用相同

1. class Emp{

private    age:number

constructor( age ){

this.age =age

}

}

2. class  Emp{

constructor( private age:number ){

}

}

4.面向对象编程-------class(类)和interface(接口)

interface:接口，是一种特殊的类，规范“要求某个class必须具备XXX方法”，如管道里

必须提供transform方法

interface Runnable {

start()            //接口中的方法没有主体！

stop()

}

----------------------------------------------------

class  Car   implements Runnable {

start(){}        //接口的实现者必须提供指定的方法，要有主体

stop(){}

.......

}

5.装饰器

见手册 https://www.tslang.cn/docs/handbook/decorators.html

面试题：前端体系中有哪些发起异步请求的工具？各自的利弊？

工具名                                               本质                                                                        优劣势

原生XHR                            let xhr =new XHRHttpRequest()             浏览器支持的原生技术；基于回调方式处理响应

JQuery.ajax()                     也是XHR，只是进一步的封装而已              比原生要简单；基于回调方式处理响应；

Axios                                 也是XHR，只是进一步的封装而已              比原生要简单；基于Promise处理响应；可以                                                                                                               排队、并发、撤销；

NG HttpClient                    也是XHR，只是进一步的封装而已             比原生要简单；基于“观察者模式”处理响                                                                                                                 应；可以排队、并发、撤销

Fetch                                  不再是XHR，是W3C提出的新技术，         比XHR从根本上就更加先进；天然基于                                                       有望取代XHR                                           Promise;目前浏览器还有兼容性问题

"马走日象走田"             ------------------"双炮枪"组合连招

JS类/接口/原型            ------------------设计模式(23+1中)    JavaScript设计模式(书)

23中设计模式之一：观察者模式的原理：

Observable:可被关注的对象，在未来某个不确定的时间点可能抛出特定的事件。

Subscribe:订阅，建立与可被关注的对象的契约，一旦得到新消息立即会被通知到

3.Angular官方提供的服务对象-------------httpclient

HttpClient服务：是Angular提供的用于发起异步XHR请求对象

使用步骤：

1.在主模块中导入HttpClientModule模块

//app.module.ts

imports:[ BrowserModule,HttpClientModule]

2.在组件中声明依赖于HttpClient服务对象，就会被自动注入进来

constructor(private http:HttpClient){}

3.调用HttpClient实例实现异步请求

this.http.get( url ).subscribe( (res)=>{ })

4.面试题：组件的生命周期钩子函数

手册地址：https://angular.cn/guide/lifecycle-hooks

Angular中的组件的生命周期钩子函数调用顺序：

(0)constructor()                组件对象被创建了

(1)ngOnChanges()            组件绑定的属性值发生改变

(2)ngOnInit()                     组件初始化完毕-------等同于Vue.js的mounted

(3)ngDoCheck()                 组件检查到了系统对自己的影响

(4)ngAfterContentInit()     组件的内容初始化完成

(5)ngAfterContentChecked()    组件的内容发生变化需要检查

<myc01><p>{{uname}}</p></myc01>

(6)ngAfterViewInit()             组件的视图初始化完成

(7)ngAfterViewChecked()     组件的视图发生变化需要检查

template:'<p>{{uname}}</p>'

(8)ngOnDestroy()                 组件即将从DOM树上卸载，适合执行一些资源释放性语句

，例如：定时销毁....

*ng="false"