走心干货-angular6新特性简述

Service
RxJS6
弃用与废除
ElementRef
Angular Elements
Ivy
Tree Shaking
ng update更新策略

angular6

〇️、前言

• 会更加注重工具的使用而不是框架

ng update;
ng add @angular/pwa

一、Service新的注入方式

• 现在有新的推荐方式来注册provider---直接在ts文档里使用@Injectable(),然后使用provideIn新属性。
• angular6 之前注册Service

import { UserService } from './user.service';
+
@Injectable()
export class UserService{
    
}
+
@NgModule({
   ...
   providers: [
    UserService
   ],
   ...
})

• angular6 注册Service

@Injectable({
    provideIn:'root' //新添的,表示从root根部就开始注入
})
export class UserService{
}

+
   @NgModule({
   providers: [], //删掉了之前版本需求的UserService
  
})

• angular6开始，一个service如果在应用中没有用到的话，是不会会被webpack中的摇树优化(tree-service)-(之前版本不是这样子的)

 describe('UserService',() => {
 //angular6以后注释掉的这些不需要了
    
    
    
    if('不返回用户', () => {
      const service =TestBed.get(UserService);
      expect(service.list().length).toBe(2);
    })
  })

• 用上面的方式，所有的service用provideIn注册后只有在真正用得到的时候才会被实例化。

二、RxJS 6

• angular6现在内部用RxJS6，因此你要更新你的应用
• RxJS 6改变了import的方式

//RxJS5 版本
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/map';

 const squares$: Observable = Observable.of(1,2).map(n => n * n);

//RxJS5.5版本
 import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';

 const squares$: Observable = of(1,2).pipe(map(n => n * n);
 )

//现在引入RxJS 6.0
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
const squares$：Observable = of(1, 2).pipe(
  map(n => n * n)
  )

• RxJS发布了一个'rxjs-compat'库，这样的话即使你目前用的不是6.0版本，他也会帮你去编译成6.0的新语法。

//RxJS6以前：
"dependencies": {
//...
"rxjs":"5.5.10",
"zone.js" :"0.8.26"
}

//RxJS6：
"dependencies": {
//...
"rxjs":"6.0.0",
"rxjs-compat":"6.0.0",
"zone.js" :"0.8.26"
}

• angular开发小组写了一个 RxJS v5.x 向v6升级指南
• 注意：新发布了一款TypeScript语法检测工具 -- 'rxjs-tslint' !，内含4项规则，使用'tslint --fix'可以自动将你的RxJS迁移到最新版本，(这样的话即使现在不会v6版本也没关系)，

规则名字	简介
rxjs-collapse-imports	将来自rxjs的多个对象导入到一个
rxjs-pipeable-operators-only	将有副影响的operators迁移到pipes管道里
rxjs-no-static-observable-methods	迁移静态Observables方法调用
rxjs-proper-imports	升级 RxJS 5.x.x 里的import语法到RxJS 6.0

• YouTube的关于RxJS6介绍： https://www.youtube.com/watch?v=JCXZhe6KsxQ

三、弃用与废除

• 弃用