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.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