Self-defined Angular Error Handling Framework
It is better to use a service to handle Angular errors including errors outside your app(but sent back to app like backend error), network errors, internal errors and so on….
Understanding RxJS’s Observable, Observer, Subscription and Observable.create() function
Observable is a stream of data/events to be observed/processed. Observer is as the name itself suggests, a consumer of the Observable stream. Subscription is a relationship between a Observable and…
In-depth knowledge of change detection mechanism in Angular views
This is the original source for your reference. https://hackernoon.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f Below it is the main change detection procedure: Angular has a bunch of high-level concepts to manipulate the views. I’ve written…
debugging Angular modules from console
Adding globals.ts: 2. import global.ts to main.ts: 3. accessing modules from console: window[‘@angular/core’].ApplicationRef 4. use ng.probe() to check components and trigger actions.
the new static option for @ViewChild in Angular 8
{ static: true } needs to be set when you want to access the ViewChild in ngOnInit. { static: false } can only be accessed in ngAfterViewInit. This is also what you want to go for…
@ViewChild(‘myname’, {read: ViewContainerRef}) target : ViewContainerRef;
所支持的选择器包括： 任何带有 @Component 或 @Directive 装饰器的类 字符串形式的模板引用变量（比如可以使用 @ViewChild(‘cmp’) 来查询 <my-component #cmp></my-component> 组件树中任何当前组件的子组件所定义的提供商（比如 @ViewChild(SomeService) someService: SomeService ） 任何通过字符串令牌定义的提供商（比如 @ViewChild(‘someToken’) someTokenVal: any ） TemplateRef（比如可以用 @ViewChild(TemplateRef) template; 来查询 <ng-template></ng-template>） @ViewChild(‘myname’, {read: ViewContainerRef}) target : ViewContainerRef; The following is an explanation to read: There can be several instances…
Modify DOM elegantly using Angular ElementRef and Render2
This is an example using ElementRef and Render2 to modify CSS style dynamically. import { Component, ElementRef, ViewChild, AfterViewInit, Renderer2 } from ‘@angular/core’; @Component({ selector: ‘my-app’, template: ` <h1>Welcome to…
Angular request and response Interceptor usage
请求拦截器 (Request Interceptor) 如果我们想要注册新的拦截器 (interceptor)，我们需要实现 HttpInterceptor 接口，然后实现该接口中的 intercept 方法。 需要注意的是，请求对象和响应对象必须是不可修改的 (immutable)。因此，我们在返回请求对象前，我们需要克隆原始的请求对象。 next.handle(req) 方法使用新的请求对象，调用底层的 XHR 对象，并返回响应事件流。 响应拦截器 (Response Interceptor) 响应拦截器可以通过在 next.handle(req) 返回的流对象 (即 Observable 对象) 上应用附加的 Rx 操作符来转换响应事件流对象。 接下来要应用 JWTInterceptor 响应拦截器的最后一件事是注册该拦截器，即使用 HTTP_INTERCEPTORS 作为 token，注册 multi Provider： More examples: For Angular6+ and RXJS6+:
Angular singleton service
在 Angular 中有三种方式来生成单例服务： 把 @Injectable() 的 providedIn 属性声明为 root。 把该服务包含在 AppModule 或某个只会被 AppModule 导入的模块中。 1. 使用 providedIn 从 Angular 6.0 开始，创建单例服务的首选方式就是在那个服务类的 @Injectable 装饰器上把 providedIn 设置为 root。这会告诉 Angular 在应用的根上提供此服务。src/app/user.service.ts content_copyimport { Injectable } from ‘@angular/core’; @Injectable({ providedIn: ‘root’, }) export class UserService { } 2. NgModule…
Angular Injector usage
Angular 中注入器是有层级结构的，即创建完注入器，我们可以基于它创建它的子注入器。 resolveAndCreate() – 根据设置的 provider 数组创建注入器 resolveAndCreateChild() – 调用已有注入器对象上的该方法，创建子注入器 当调用注入器 get() 方法，获取 token 对应的对象时，默认的查找方式是，优先从本级注入级获取，如果未找到，则往上一级查找，直到根级注入器。若未找到对应的依赖对象，默认会抛出异常。 使用示例 通过分析源码，我们也发现如果两个服务提供商 (Provider) 使用同一个 Token，却没有声明为 multiprovider，那么后面的会把前面的覆盖掉。此外需要注意的是，multiprovider 不能与普通的 provider 混用。 @Self()、@SkipSelf()、@Optional() 等装饰器有什么作用？ @Self() – 表示只在本级注入器查找依赖对象 @SkipSelf() – 表示不从本级注入器获取依赖对象…
Forwarded: ngzone usage
NgZone的简单使用 在Angular4中，如果模板中有一些变量在组件中经常变动，比如变量foo。 <div> 我经常变动: {{ foo }} </div> 在组件中它的初始值为0。 foo = 0; 假设在组件中有个循环，不断更新foo的值。 for (let i = 0; i < 100; i++) { setInterval(() => this.counter++, 10); } 那么频繁的变动将造成性能损耗。 Angular为我们提供了NgZone服务，对于一些频繁的操作，可以不去触发变更检测。…