@angular/router#NavigationCancel TypeScript Examples
The following examples show how to use
@angular/router#NavigationCancel.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: app.component.ts From Angular-HigherOrderMapping with MIT License | 6 votes |
checkRouterEvent(routerEvent: Event): void {
if (routerEvent instanceof NavigationStart) {
this.loading = true;
}
if (routerEvent instanceof NavigationEnd ||
routerEvent instanceof NavigationCancel ||
routerEvent instanceof NavigationError) {
this.loading = false;
}
}
Example #2
Source File: app.component.ts From Angular-Cookbook with MIT License | 6 votes |
constructor(private auth: AuthService, private router: Router) {
this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
this.isLoadingRoute = true;
}
if (
event instanceof NavigationEnd ||
event instanceof NavigationError ||
event instanceof NavigationCancel
) {
this.isLoadingRoute = false;
}
});
}
Example #3
Source File: layout.component.ts From nghacks with MIT License | 6 votes |
private _initLayout(): void {
// Show progressbar on route change lazy loading
this._router.events
.pipe(filter((event) => event instanceof NavigationStart))
.subscribe(() => {
this._loaderService.showProgressbar();
});
this._router.events
.pipe(filter((event) => event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel))
.subscribe(() => {
if (this.sidenavDrawer.mode === 'over' && this.sidenavDrawer.opened) {
this.sidenavDrawer.close();
}
this._loaderService.hideProgressbar();
});
// Adjusting side nav based on screen size
this._mediaQueryService.onMediaChange
.pipe(
distinctUntilChanged()
)
.subscribe(value => {
if (!value) { return; }
this._setSidenavAccordingScreenSize(value);
});
}
Example #4
Source File: app.component.ts From employee-crud-api with MIT License | 6 votes |
/**
* @param event Método responsável por tratar as condicionais em relação ao Loading Bar
*/
private navigationInterceptor(event: Event): void {
if (event instanceof NavigationStart) {
this.slimLoadingBarService.start();
}
if (event instanceof NavigationEnd) {
this.slimLoadingBarService.complete();
}
if (event instanceof NavigationCancel) {
this.slimLoadingBarService.stop();
}
if (event instanceof NavigationError) {
this.slimLoadingBarService.stop();
}
}
Example #5
Source File: top-progress-bar.component.ts From ng-ant-admin with MIT License | 6 votes |
constructor(private router: Router, private cdr: ChangeDetectorRef) {
this.router.events.subscribe(evt => {
// 表示在惰性加载某个路由配置前触发的事件。
if (!this.isFetching && evt instanceof RouteConfigLoadStart) {
this.isFetching = true;
this.cdr.markForCheck();
}
if (!this.isFetching && evt instanceof NavigationStart) {
this.isFetching = true;
this.cdr.markForCheck();
}
if (evt instanceof NavigationError || evt instanceof NavigationCancel) {
this.isFetching = false;
if (evt instanceof NavigationError) {
}
this.cdr.markForCheck();
return;
}
if (!(evt instanceof NavigationEnd || evt instanceof RouteConfigLoadEnd)) {
return;
}
if (this.isFetching) {
setTimeout(() => {
this.isFetching = false;
this.cdr.markForCheck();
}, 600);
}
});
}
Example #6
Source File: app.service.ts From onchat-web with Apache License 2.0 | 6 votes |
/**
* 检测路由导航事件
*/
detectNavigation() {
this.router.events.subscribe((event: Event) => {
switch (true) {
case event instanceof NavigationStart:
this.globalData.navigating = true;
break;
case event instanceof NavigationCancel:
this.feedbackService.slightVibrate(); // 如果路由返回被取消,就震动一下,表示阻止
case event instanceof NavigationEnd:
case event instanceof NavigationError:
this.globalData.navigating = false;
break;
}
});
}
Example #7
Source File: app.component.ts From youpez-admin with MIT License | 6 votes |
ngOnInit(): void {
this.route.queryParams
.subscribe((queryParams) => {
if (queryParams.theme) {
this.settingsService.setTheme(queryParams.theme)
}
else {
this.settingsService.setTheme(getSessionStorage('--app-theme'))
}
if (queryParams.sidebar) {
this.settingsService.setSideBar(queryParams.sidebar)
}
else {
this.settingsService.setSideBar(getSessionStorage('--app-theme-sidebar'))
}
if (queryParams.header) {
this.settingsService.setHeader(queryParams.header)
}
else {
this.settingsService.setHeader(getSessionStorage('--app-theme-header'))
}
})
this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
}
if (event instanceof NavigationEnd) {
if (!this.appLoaded) {
(<any>window).appBootstrap()
this.appLoaded = true
}
}
if (event instanceof NavigationCancel) {
}
})
}
Example #8
Source File: app.component.ts From nestjs-angular-starter with MIT License | 6 votes |
navigationInterceptor(event: RouterEvent): void {
if (event instanceof NavigationStart) {
this.isLoading = true;
// Toogle navbar collapse when clicking on link
const navbarCollapse = $('.navbar-collapse');
if (navbarCollapse != null) {
navbarCollapse.collapse('hide');
}
}
if (event instanceof NavigationEnd) {
this.isLoading = false;
}
// Set loading state to false in both of the below events to hide the spinner in case a request fails
if (event instanceof NavigationCancel) {
this.isLoading = false;
}
if (event instanceof NavigationError) {
this.isLoading = false;
}
}
Example #9
Source File: app.component.ts From nodejs-angular-typescript-boilerplate with Apache License 2.0 | 6 votes |
ngAfterViewInit(): void {
this.router.events.subscribe((event) => {
if (
event instanceof NavigationEnd || event instanceof NavigationCancel
) {
this.loading = false;
}
});
}
Example #10
Source File: spinner.component.ts From flingo with MIT License | 6 votes |
constructor(private router: Router, @Inject(DOCUMENT) private document: Document) {
this.router.events.subscribe(
(event) => {
if (event instanceof NavigationStart) {
this.isSpinnerVisible = true;
} else if (
event instanceof NavigationEnd ||
event instanceof NavigationCancel ||
event instanceof NavigationError
) {
this.isSpinnerVisible = false;
}
},
() => {
this.isSpinnerVisible = false;
}
);
}
Example #11
Source File: layout.component.ts From budget-angular with GNU General Public License v3.0 | 5 votes |
constructor(
private cdr: ChangeDetectorRef,
private location: Location,
private authService: AuthService,
private router: Router,
iconRegistry: MatIconRegistry,
sanitizer: DomSanitizer
) {
iconRegistry.addSvgIcon(
"home",
sanitizer.bypassSecurityTrustResourceUrl("assets/home.svg")
);
iconRegistry.addSvgIcon(
"list",
sanitizer.bypassSecurityTrustResourceUrl("assets/list.svg")
);
iconRegistry.addSvgIcon(
"settings",
sanitizer.bypassSecurityTrustResourceUrl("assets/settings.svg")
);
iconRegistry.addSvgIcon(
"edit",
sanitizer.bypassSecurityTrustResourceUrl("assets/edit.svg")
);
iconRegistry.addSvgIcon(
"remove",
sanitizer.bypassSecurityTrustResourceUrl("assets/remove.svg")
);
this.routerSub = router.events.subscribe((e) => {
if (e instanceof NavigationStart || e instanceof ActivationStart) {
this.loadingRoute = true;
} else if (
e instanceof NavigationEnd ||
e instanceof NavigationError ||
e instanceof NavigationCancel
) {
this.loadingRoute = false;
this.selectCurrentRoute();
}
});
this.userEmail$ = this.authService.getUserEmail$();
}
Example #12
Source File: app.component.spec.ts From employee-crud-api with MIT License | 5 votes |
describe('AppComponent', () => {
let appComponent: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let routerSpy: jasmine.SpyObj<Router>;
beforeEach(() => {
const mockRouter = {
events: of({}),
};
TestBed.configureTestingModule({
imports: [CommonModule, ReactiveFormsModule, FontAwesomeModule],
providers: [
AppComponent,
SlimLoadingBarService,
{ provide: Router, useValue: mockRouter },
],
});
fixture = TestBed.createComponent(AppComponent);
appComponent = fixture.componentInstance;
routerSpy = TestBed.inject(Router) as jasmine.SpyObj<Router>;
});
describe('Initialization', () => {
it('should be created', () => {
expect(appComponent).toBeTruthy();
});
it('should init not EventNavigation', () => {
const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
appComponent.ngOnInit();
expect(spy_ngOnInit).toHaveBeenCalled();
});
it('should init with NavigationStart', () => {
const event = new NavigationStart(0, 'URI');
(<any>routerSpy.events) = of(event);
const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
appComponent.ngOnInit();
expect(spy_ngOnInit).toHaveBeenCalled();
});
it('should init with NavigationEnd', () => {
const event = new NavigationEnd(0, 'URI', 'URL');
(<any>routerSpy.events) = of(event);
const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
appComponent.ngOnInit();
expect(spy_ngOnInit).toHaveBeenCalled();
});
it('should init with NavigationCancel', () => {
const event = new NavigationCancel(0, 'URI', 'FAIL');
(<any>routerSpy.events) = of(event);
const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
appComponent.ngOnInit();
expect(spy_ngOnInit).toHaveBeenCalled();
});
it('should init with NavigationError', () => {
const event = new NavigationError(0, 'URI', {});
(<any>routerSpy.events) = of(event);
const spy_ngOnInit = spyOn(appComponent, 'ngOnInit').and.callThrough();
appComponent.ngOnInit();
expect(spy_ngOnInit).toHaveBeenCalled();
});
});
});