Angular 学习笔记 (Angular 9 & ivy)

refer :

https://blog.angularindepth.com/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf

https://blog.angularindepth.com/asynchronous-modules-and-components-in-angular-ivy-1c1d79d45bd3

https://blog.angularindepth.com/the-future-of-standalone-components-in-the-post-ivy-release-days-e7ed9b9b4dcd

https://blog.nrwl.io/metaprogramming-higher-order-components-and-mixins-with-angular-ivy-75748fcbc310

https://www.softwarearchitekt.at/aktuelles/architecture-with-ivy-a-possible-future-without-angular-modules/

https://www.softwarearchitekt.at/aktuelles/architecture-with-angular-ivy-part-2-higher-order-and-dynamic-components/

https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/

https://blog.angularindepth.com/angular-ivy-change-detection-execution-are-you-prepared-ab68d4231f2c (change detech)

https://blog.angularindepth.com/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection-876751edd9fd  (change detech)

https://netbasal.com/optimizing-angular-change-detection-triggered-by-dom-events-d2a3b2e11d87 (change detech)

听说 Angular 9 没有什么了不起的功能发布，只是将某个配置修改成默认而已. 团队真不给力丫...

修改的这个配置是渲染引擎, 名叫 ivy，好像是因为第 4 代所以叫这个名字.

它有什么不一样的地方呢 ？

主要是组件编辑后的代码不同了，对树摇友好一点. 代码好看一点. size 小一点.

1. 长相.

编辑后都把代码写进静态函数了, build 模板是直接使用调用式..elementstart 会直接调用 dom api 去创建 element (好像是这样)

注意那个 ɵfac 之后会讲到.

2. no more entry component.

以前要动态出组件挺麻烦的，要 entry component 而且 module 也不可以 lazyload

现在简单很多了

  open() {
    import('./abc/abc.module').then((m) => {
      ɵcreateInjector(m.AbcModule, this.injector);
      this.dialog.open(AbcComponent, { width: '1000px' });
    });

    // import('./abc/abc.component').then((m) => {
    //   const factory = this.cfr.resolveComponentFactory(m.AbcComponent);
    //   this.target.createComponent(factory, 0, this.injector);
    // });

    // import('./abc/abc.component').then((m) => ɵrenderComponent(m.AbcComponent,
    //   { injector: this.injector, host: this.el.nativeElement }
    // ));
  }

直接 lazy load 然后链接 injector 给这个模块，就可以用任何组件了.

模块无需 entry component 也不用 export

@NgModule({
  declarations: [AbcComponent, XyzComponent],
  imports: [
    CommonModule
  ],
  // exports: [AbcComponent, XyzComponent],
  // entryComponents: [AbcComponent]
})
export class AbcModule { }

注意:  如果你没用 import module 而是直接 append component 你会发现也是可以跑的, 但是如果这个 component 里面有依赖其它的 component 就不行了， 除非你没用使用 module, 而是通过组件自己去写依赖.

目前官方没用给出不写 module 的方式. 相信之后会出, 可能会长的像 2.0 rc 那样，那个年代 ngmodule 还没有出来呢...

另一个重点是 injector, 我们 import 过来后, 需要用这个 module build 一个 inujector, 因为这个 module 里面可能有 provider 然后才能 append component.

3. optional ng module

ivy 后, ng module 变得是一个 optional, 当然 ng module 为我们封装了很多好料, injector, detech change, life cycle 等等.

然后你不要用它，全部都要自己弄咯. 文章里有参考，我自己没有这个需求以后有才补上 demo.

4. HOC (height order component)

目前还感受不到它能做什么大事情. 它的功能是说，现在我们可以通过 decorator 去拦截 ɵfac (这个 ɵ(Greek Theta) 是因为目前这个方法是 private 的.)

拦截后我们可以重写 ɵfac

export function HOC() {
  return (cmpType) => {
    const originalFactory = cmpType.ɵfac;
    cmpType.ɵfac = (...args: any) => {
      const cmp = originalFactory(...args);
      console.log('component instance', cmp); // 重点
      return cmp;
    };
  };
}

@HOC()
@Component({
  selector: 'app-test-dialog',
  templateUrl: './test-dialog.component.html',
  styleUrls: ['./test-dialog.component.scss']
})
export class TestDialogComponent implements OnInit {

看重点，这里我们就可以获取到组件实例，然后可以做一个封装，比如修改一些接口等等的，可以算是装修模式吧. ngOnChange 就是用这个方式去实现的哦，它已经不是内置的 life cycle hook 了.

我们也可以通过类似方式去加强 life cycle hook.

4.I18n

ng 的 i18n 非常弱, 绝大部分功能从 v5 说要做到 v9 都没有实现.

v9 后已经被分离出来了，如果要使用的话需要 install package @angular/localize

之前 angular.json 里面配置 "i18nLocale": "en-US" 的话也会直接报错, 如果没有装 package 的话。