#18 Router APIを再発見！ (2020-06-10)

[lacolaco]

ng-japan OnAir vol.18 "Router API 再発見" - YouTube

ng-japan OnAirって何？:thinking_face:

Angular日本ユーザー会が主催するYouTube Liveです！
過去のOnAirの配信アーカイブはこちらから視聴できます！

• 最新情報やプラクティスをキャッチアップする機会は多い方がいい
• 勉強会やミートアップは東京に集中してるし、予定が合わないと参加できない…
• オンライン開催なら誰でもどこでも参加できるしアーカイブが残る！ :party_popper:

内容

• Router API再発見！

会場

https://www.youtube.com/channel/UCayXpiOPFQh9MWePLoEFLmg/live

🔔 YouTubeチャンネルを購読 しておくと、配信開始のお知らせを受け取ることができます！

💃 出演者紹介

lacolaco

Google Developers Expert / Angular日本ユーザー会 代表
https://twitter.com/laco2net

okunokentaro

Angular日本ユーザー会、ng-kyoto オーガナイザ
https://twitter.com/okunokentaro

しみきょん

エンジニア at DMM.com / Angular日本ユーザー会のスタッフしてます
https://twitter.com/shimikyonkyon

[lacolaco]

Router API再発見

• RouterModule
• Route
• RouterOutlet
• Router
• RouterLink
• ActivatedRoute

https://stackblitz.com/angular/egnnljjvrgj?file=src%2Fapp%2Fapp.component.html

RouterModule

https://angular.jp/api/router/RouterModule

class RouterModule {
  static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule>
  static forChild(routes: Routes): ModuleWithProviders<RouterModule>
}

interface ExtraOptions {
  enableTracing?: boolean
  useHash?: boolean
  initialNavigation?: InitialNavigation
  errorHandler?: ErrorHandler
  preloadingStrategy?: any
  onSameUrlNavigation?: 'reload' | 'ignore'
  scrollPositionRestoration?: 'disabled' | 'enabled' | 'top'
  anchorScrolling?: 'disabled' | 'enabled'
  scrollOffset?: [number, number] | (() => [number, number])
  paramsInheritanceStrategy?: 'emptyOnly' | 'always'
  malformedUriErrorHandler?: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
  urlUpdateStrategy?: 'deferred' | 'eager'
  relativeLinkResolution?: 'legacy' | 'corrected'
}

Route

https://angular.jp/api/router/Route

• Route / Routes

interface Route {
  path?: string
  pathMatch?: string
  matcher?: UrlMatcher
  component?: Type<any>
  redirectTo?: string
  outlet?: string
  canActivate?: any[]
  canActivateChild?: any[]
  canDeactivate?: any[]
  canLoad?: any[]
  data?: Data
  resolve?: ResolveData
  children?: Routes
  loadChildren?: LoadChildren
  runGuardsAndResolvers?: RunGuardsAndResolvers
}

interface CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
}

interface CanActivateChild {
  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
}

interface CanDeactivate<T> {
  canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
}

RouterOutlet

<router-outlet
  (activate)='onActivate($event)'
  (deactivate)='onDeactivate($event)'></router-outlet>

Router

https://angular.jp/api/router/Router

class Router {
  events: Observable<Event>
  routerState: RouterState
  errorHandler: ErrorHandler
  malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
  navigated: boolean
  urlHandlingStrategy: UrlHandlingStrategy
  routeReuseStrategy: RouteReuseStrategy
  onSameUrlNavigation: 'reload' | 'ignore'
  paramsInheritanceStrategy: 'emptyOnly' | 'always'
  urlUpdateStrategy: 'deferred' | 'eager'
  relativeLinkResolution: 'legacy' | 'corrected'
  config: Routes
  url: string

  initialNavigation(): void
  setUpLocationChangeListener(): void
  getCurrentNavigation(): Navigation | null
  resetConfig(config: Routes): void
  ngOnDestroy(): void
  dispose(): void
  createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree
  navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
  navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
  serializeUrl(url: UrlTree): string
  parseUrl(url: string): UrlTree
  isActive(url: string | UrlTree, exact: boolean): boolean
}

UrlTree

interface UrlTree {
  root: UrlSegmentGroup
  queryParams: Params
  fragment: string | null
  queryParamMap: ParamMap
  toString(): string
}

const tree: UrlTree =
  router.parseUrl('/team/33/(user/victor//support:help)?debug=true#fragment');
const f = tree.fragment; // return 'fragment'
const q = tree.queryParams; // returns {debug: 'true'}
const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
const s: UrlSegment[] = g.segments; // returns 2 segments 'team' and '33'
g.children[PRIMARY_OUTLET].segments; // returns 2 segments 'user' and 'victor'
g.children['support'].segments; // return 1 segment 'help'

NavigationExtras

interface NavigationExtras {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
  skipLocationChange?: boolean
  replaceUrl?: boolean
  state?: {...}
}

RouterLink

<a routerLink="/" 
  [queryParams]="{ key: 'value' }"
  [fragment]="'foo'"
  [queryParamsHandling]="'merge'" 
  [preserveFragment]="true"
  [skipLocationChange]="true"
  [replaceUrl]="true"
  [state]="{ key: 'value' }"
  ></a>