Angular 9 正式发布,有什么骚东西呢?

1,635 阅读3分钟

前言: 都说 ng 上手成本高,但是当你上手 ng 之后构建一个 web 应用是非常爽的,距离现在不到20小时,在 Angular 的官方 github 上发布了 Angular 9 , 并且 Angular conf 也将在二月八号凌晨两点,正式对外发布,带来哪些新东西呢? 本文带你预览一下

1. Ivy !!!!

重中之重就是新的渲染引擎 Ivy , 在 ng 早些版本的时候曾经使用过预览版的 Ivy , 后来出于稳定性原因一直都没有使用在项目上,新的渲染引擎将为我们带来巨大的性能提升。官网对其描述如下:

Ivy is the code name for Angular's next-generation compilation and rendering pipeline. With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine.

Ivy 是 Angular 下一代编译器和渲染管道的名字,随着 Angular 9 的发布,新的渲染引擎和 runtime 指令都将作为默认,而不是早些版本的 View Engine.

虽然并不是表面上的那种巨大改变,但是在你构建 ng app 的时候,使用 template 的时候,Ivy 在你看不见的地方做了很多的东西,比方说更小的 boundle 体积, AOT ( Ahead Of Time) 作为默认选项,在之前开发项目的过程中,使用 ng serve 开发的过程中其实使用的是 JIT ( Just In Time ) 编译,好处是开发过程中很快的编译速度以及更新文件后页面视图刷新的也很快,但是缺点是当使用 ng build – prod 时候才会发现很多开发中难以发现的参数问题,现在使用 AOT 作为默认选项后,并且 Ivy 更加快速的编译效果,能为我们开发过程中提供更加稳定的,更加高效的开发效率。

2. Template type checking 模板类型检查

现在 ng 可以像 TS 一样去检查模板中绑定的数据类型,模板中表达式的数据类型,并且在控制台可以直接反馈出来,目前支持三种模式并且都可以在 tsconfig 文件中进性修改。

首先看如下案例: ng 8.3 版本

@Component({
    selector: 'app-user',
    templateUrl: '<p>user name is {{ name }}</p>',
})
export class UserComponent implements OnInit {
    @Input() name: string;
    ngOnInit() {}
}
// 在 User 组件中表明了 Input 属性类型是 string , 然后用户的名字会在这里表述出来


// 然后在其父级组件中使用
@Component({
    selector: 'app-root',
    templateUrl: '<app-user [name]="user.age"></app-user>',
})
export class AppComponent {
    user = {
        name: '王花花',
        age: 10
    };
}

此时如果运行这个项目会发现并没有报错,但是 number 类型缺传给了 string 类型,这在实际开发的时候很容易就会在不经意间造成参数传递问题。

现在通过设置 "strictTemplates": true 就可以对 template 传参类型检查,此时 terminal 就会返回类型错误。

3. @ViewChild 中 可选 static 回归

小的回归, @ViewChild('user', { static: false }) userElement: ElementRef<HTMLElement>;

现在只有 static : true 的时候才需要填写这一项,emmmm 以前 ng6 时候的见过

总结

原生支持 Typescript, rxjs 使得我很喜欢用 Angular, 并且强大的 cli 在创建组件,pipes,service 的时候用起来可谓是顺手的不得了(不吹不黑)。