天天看點

Angular Injector.create的工作原理

下列這段代碼:

const BASE_URL = new InjectionToken<string>('隻是描述');
    const injector =
    Injector.create({providers: [{provide: BASE_URL, useValue: 'http://localhost'}]});
    const url = injector.get(BASE_URL);
    console.log(url);           

複制

運作時會列印http://localhost.

Angular Injector.create的工作原理

建立Injector Implementation執行個體:

Angular Injector.create的工作原理

建立R3Injector執行個體:

Angular Injector.create的工作原理

處理每一個provider:

Angular Injector.create的工作原理
Angular Injector.create的工作原理
Angular Injector.create的工作原理

給provider建立一個執行個體:

Angular Injector.create的工作原理

上圖的makeRecord相當于工廠函數:

Angular Injector.create的工作原理

最後将構造的record設定進injector的records map裡:

Angular Injector.create的工作原理

然後執行get方法:

Angular Injector.create的工作原理

從injector的map裡根據injection token讀取記錄:

Angular Injector.create的工作原理

hydrate就是根據token來執行個體化record:

Angular Injector.create的工作原理
Angular Injector.create的工作原理