У меня есть глобальный загрузчик, который реализован так:
CoreModule:
router.events.pipe(
filter(x => x instanceof NavigationStart)
).subscribe(() => loaderService.show());
router.events.pipe(
filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => loaderService.hide());
LoaderService:
@Injectable({
providedIn: 'root'
})
export class LoaderService {
overlayRef: OverlayRef;
componentFactory: ComponentFactory<LoaderComponent>;
componentPortal: ComponentPortal<LoaderComponent>;
componentRef: ComponentRef<LoaderComponent>;
constructor(
private overlay: Overlay,
private componentFactoryResolver: ComponentFactoryResolver
) {
this.overlayRef = this.overlay.create(
{
hasBackdrop: true,
positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
}
);
this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoaderComponent);
this.componentPortal = new ComponentPortal(this.componentFactory.componentType);
}
show(message?: string) {
this.componentRef = this.overlayRef.attach<LoaderComponent>(this.componentPortal);
this.componentRef.instance.message = message;
}
hide() {
this.overlayRef.detach();
}
}
При работе с Angular 7.0.2 поведение (которое я хотел) было:
- Показывать загрузчик при разрешении данных, прикрепленных к маршруту, и при загрузке ленивого модуля
- Не показывать загрузчик при переходе к маршруту без распознавателя
Я обновил до Angular 7.2, теперь поведение:
- Показывать загрузчик при разрешении данных, прикрепленных к маршруту, и при загрузке ленивого модуля
- Показать наложение без
LoaderComponentпри переходе к маршруту без какого-либо распознавателя
Я добавил несколько журналов событий NavigationStart и NavigationEnd и обнаружил, что NavigationEnd запускается сразу после NavigationStart (что нормально), а Overlay исчезает примерно через 0,5 с после.
Я прочитал CHANGELOG.md но не нашел ничего, что могло бы объяснить эту проблему. Любая идея приветствуется.
Редактировать:
После дальнейших исследований я восстановил предыдущее поведение, установив package.json следующим образом:
"@angular/cdk": "~7.0.0",
"@angular/material": "~7.0.0",
вместо этого:
"@angular/cdk": "~7.2.0",
"@angular/material": "~7.2.0",
Я обнаружил неисправный коммит, выпущенный в версии 7.1.0, и опубликовал свою проблему в связанной проблеме GitHub. Это исправляет затухание анимации Overlay.
Что такое совместимый с v7. 1+ способ получить желаемое поведение? По моему мнению, лучше всего было бы: показывать загрузчик только тогда, когда это необходимо, но NavigationStart не содержит необходимой информации. Я хотел бы избежать в конечном итоге поведения отказов.