Angular URL Matcher

Если имеется несколько маршрутов для одного компонента:

const routes = [
    {
      path: '',
      redirectTo: 'today',
      pathMatch: 'full'
    },
    {
      path: 'today',
      component: SomeComponent
    },
    {
      path: 'tomorrow',
      component: SomeComponent
    },
    {
      path: 'expired',
      component: SomeComponent
    }
];

Или маршруты с опциональными параметрами

const routes = [
  { 
    path: '/UserComponent/:id', 
    component: UserComponent 
  },
  { 
    path: '/UserComponent', 
    component: UserComponent 
  },
];

То такую или более сложную логику можно объединить используя UrlMatcher:

function matcherFunction(url: UrlSegment[]) {
    if (url.length == 1) {
        const path = url[0].path;
         if(path.startsWith('today') 
           || path.startsWith('tomorrow') 
           || path.startsWith('expired')){
          return {consumed: url};
        }
    }
    return null;
}

const routes = [
    {
      path: '',
      redirectTo: 'today',
      pathMatch: 'full'
    },
    {
      matcher: matcherFunction,
      component: SomeComponent
    }
]

Официальный пример:

function htmlFiles(url: UrlSegment[]) {
  return url.length === 1 && url[0].path.endsWith('.html') ? ({consumed: url}) : null;
}

const routes = [{ matcher: htmlFiles, component: AnyComponent }];

Похожие записи

Как добавить ng-bootstrap компоненты в проект Angular-CLI?

Покажу на примере нового проекта.

ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap

В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
17 августа 2017 г. в Angular

Angular. Can't set breakpoints in VS Code

Вариант решения проблемы, когда не срабатывают точки остановки при разработке Angular приложений в редакторе VS Code
10 апреля 2018 г. в Angular