Please enable JavaScript.

Coggle requires JavaScript to display documents.

Angular Router - Coggle Diagram

- - - - export class AuthGuard implements CanActivate { // Implement 'canActivate()' here }
        
        canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {...}
        
        `in canActivate(): if (!this.tokenService.token){ this.router.navigate(['/login'])} return true;
        
        do authorization check and navigate away
      - Protect Child
        
        import { CanActivateChild, ...} from '@angular/router'
        
        export class AuthGuard implements CanActivateChild { // Implement 'canActivateChild()' here }
        
        canActivateChild(...){...}
        
        Same as 'canActivate'
      - import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'
  - - - protect all children including self
    - - protect only children
  - - - Add an interface
        
        export interface CanComponentDeactivate { canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean; }
      - Add an class implements CanDeactivate
        
        import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'
        
        export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {...}
        
        canDeactivate( component: CanComponentDeactivate, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { return component.canDeactivate(); }
      - Add Guard to Route
        
        Implement CanComponentDeactivate in target component(route)
        
        canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {...}
        
        { path: '...', component: '...', canDeactivate: [CanDeactivateGuard] }
  - - - Add Component: error-page.component
        
        this.route.snapshot.data['message']
        
        this.route.data.subscribe(data: Data => this.errorMessage = data['message'])
        
        if data would change inside component. Otherwise using snapshot is fine.
      - Add Data to Route
        
        { path: 'not-found', component: ErrorPageComponet, data: { message: 'Page not found'}}
    - - retrieve some data asynchronously in each entered route
      - Dynamic Data -- Example: Server Resolver
        
        Add Service: server-resolver.service.ts
        
        import { Resolve } from '@angular/router'
        
        export class ServerResolver implements Resolve<Server> {}
        
        resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Oberservable<Server> | Promise<Server> | Server {...}
        
        implement resolve method, which return the data of given generic type. For example, call service to fetch server data here.
        
        Add to Route
        
        { path: ':id', component: ServerComponent, resolve: { server: ServerResolver } }
        
        Retrieve Data
        
        this.route.data.subscribe( data: Data => this.server = data['server'] )
        
        like static data, the resolved data will merge into data property of ActivatedRoute
- - - - <a [routerLink]="['users', id]">
  - - - <a routerLink="/" routerLinkActive="..." [routerLinkActiveOptions]="{ exact: true }">...
  - - - this.router.navigate([ '/users' ])
        
        e.g. navigate to '/users' after adding a new one
    - - import { ActivatedRoute } from '@angular/router'
      - this.router.navigate(['detail'], { relativeTo: activatedRoute })
        
        'relativeTo' is set to root path in default. Change it to activatedRoute, which is the current route.
- - - - Use queryParamsHandling property ('merge', 'preserve' and so on)
- - - - must place at the bottom of routes list
  - - - if this route is placed at the top and without 'pathMatch' set to 'full', then infinite loop will occur.
- - - - const appRoutes: Routes = [{ path: '', component: HomeComponent }, { path: 'users', component: UsersComponent }]
    - - imports: [ ..., RouterModule.forRoot(appRoutes) ]
      - exports: [..., RouterModule ]
- - - - this.route.params.subscribe((params: Params) => { this.id = params['id']; })
        
        If currently on '/users/15', and there's a routerLink which is able to navigate to '/users/20', then Angular will not re-fetch params of snapshot
      - import { Parmas } from '@angular/router'
  - - - Both #1 and #2 will navigate to '/users/5/edit?allowEdit=1#summary'
    - - this.route.snapshot.queryParams['allowEdit']
        
        this.route.queryParams.subscribe()
      - this.route.snapshot.fragment
        
        this.route.fragment.subscribe()