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 { }

 

 

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 的話。