Webpack
angular-router-loader
.loadChildren
и заменяет их на некоторое выражение:{
loadChildren: () => new Promise(resolve => {
(require as any).ensure([], require => {
resolve(require('./path/to/yourmodule').ModuleName);
})
})
}
@ngtools/webpack
, который выполняет аналогичную работу, при этом он еще компилирует все компоненты в файлы *.ngfactory.ts. После этого webpack также генерирует чанки с этими фабриками.<li *ngFor="let u of users">{{u?.name}}</li>
использование forceUpdate привести к каким то побочным эфектам
// Инжектим в наш компонент-контейнер следующее
private _cfr: ComponentFactoryResolver,
private _vcr: ViewContainerRef
// Для создания компонента руками
// описываем переопределения зависимостей
// Компонент передан в переменной componentClass
const componentProviders = ReflectiveInjector.resolve([
{ provide: Something, useValue: 1 }
]);
// Получаем фабрику из класса нашего компонента, который рендерим
const componentFactory = this._cfr.resolveComponentFactory(componentClass);
// Создаем для него инжектор - используем .parentInjector или .injector нашего текущего компонента, исходя из того, какую иерархию DI нам нужно получить для создаваемого компонента
const childInjector = ReflectiveInjector.fromResolvedProviders(componentProviders, this._vcr.parentInjector);
// Фабрикой создаем экземпляр компонента
let instance = componentFactory.create(childInjector, []);
// Вставляем во view нашего компонента
this._vcr.insert(instance.hostView, this._vcr.length);
// Запускаем отслеживание изменений
instance.componentRef.changeDetectorRef.detectChanges();
let str2dec = (s)=>s.split('').reduce((p,c)=>p*10+[0,1,2,3,4,5,6,7,8,9][c],0)
Строка разбивается по символам и каждый символ используется как ключ для массива [0,1,2,3,4,5,6,7,8,9]this.myForm= this.fb.group({
'checboxGroup': this.fb.group({
'first': [false],
'second': [false]
})
});
<my-title-component [checboxGroup]="myForm.controls['checboxGroup']"></ my-title-component>
@Input() checboxGroup: FormGroup