У Ivy есть закрытая функция с именем createInjector
, она отображается с тэтой в текущем API, но будет доступна позже, когда Ivy станет стабильной.
Предположим, у вас есть такой код:
@NgModule({
declarations: [LazyComponent],
providers: [
{
provide: 'components',
useValue: {
lazy: LazyComponent
}
}
],
entryComponents: [LazyComponent]
})
export class LazyModule {
static getLazyComponents: () => { lazy: typeof LazyComponent };
constructor(injector: Injector) {
LazyModule.getLazyComponents = () => injector.get('components');
}
}
Давайте лениво загрузить LazyModule
через динамический импорт:
import { ɵcreateInjector as createInjector, Injector } from '@angular/core';
export class AppComponent {
constructor(injector: Injector) {
import('./lazy/lazy.module').then(({ LazyModule }) => {
createInjector(LazyModule, injector);
console.log(LazyModule.getLazyComponents());
});
}
}
Но, используя этот подход - вы лениво загружаете модуль.Если вы хотите выполнить отложенную загрузку компонента - вы можете сделать это без использования модуля, предположим, что это LazyComponent
, который находится внутри lazy.component.ts
файла:
@Component({
selector: 'app-lazy',
template: `
<h1>I am lazy</h1>
`
})
export class LazyComponent {}
Вы можете использовать динамический импорт для загрузки этого компонента +renderComponent
функция:
import { ɵrenderComponent as renderComponent, Injector } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-lazy></app-lazy>
`
})
export class AppComponent {
constructor(injector: Injector) {
import('./lazy.component').then(({ LazyComponent }) => {
renderComponent(LazyComponent, {
injector,
host: 'app-lazy'
});
});
}
}
Одно замечание - ленивые компоненты не имеют жизненного цикла!Будет вызвано constructor
, но не такие ловушки, как ngOnInit
, ngOnDestroy
и т. Д.
Возвращаясь к вашему вопросу о ленивом модуле - вы, вероятно, захотите выставить фабрики компонентов этих ленивых компонентов, что-товот так:
export class LazyModule {
static getComponentFactories: () => {
lazy: ComponentFactory<LazyComponent>;
};
constructor(resolver: ComponentFactoryResolver) {
LazyModule.getComponentFactories = () => ({
lazy: resolver.resolveComponentFactory(LazyComponent)
});
}
}
Если вы не хотите использовать статические функции, вы можете объявить методы экземпляра:
export class LazyModule {
constructor(private resolver: ComponentFactoryResolver) {}
public getComponentFactories() {
return {
lazy: this.resolver.resolveComponentFactory(LazyComponent)
};
}
}
И затем получить экземпляр этого модуля:
export class AppComponent {
constructor(private injector: Injector) {
import('./lazy/lazy.module').then(({ LazyModule }) => {
const injector = createInjector(LazyModule, this.injector);
const lazyModule = injector.get(LazyModule);
console.log(lazyModule.getComponentFactories());
});
}
}