Как извлечь и передать параметр url из сложного url с помощью маршрутизатора Angular 6 UrlMatcher matcher - PullRequest
0 голосов
/ 23 мая 2018

Как извлечь параметры из комплексного URL-адреса для, например, domain.com/product-samsung-tv-34.html Где 34 - параметр, который необходимо передать соответствующему компоненту.

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Решение с использованием Angular 6 matcher и регулярного выражения Используя UrlMatcher или matcher:

export const routes = [
  { matcher: YourMatcherLogic, component: ProductComponent },

Функция YourMatcherLogic

  // Url matcher for specific logic implementation and extract 
  parameter using regex.
  export function YourMatcherLogic(url: UrlSegment[]) {
    // Implement your logic to parse different url segments and extract value as parameters to pass to the component
    if ((url.length > 1 && url[1].path.endsWith('.html')) {
      let _id = extractIDFromEndsWithHTML(url[1].path);  // extractIDFromEndsWithHTML custom function that extracts id from urls 'hello/3.html' using regex
      // add id parameters
      url[1].parameters = {id: _id};
      return {
      consumed: url
    };
  } else {
    return null;
  }

}

В компоненте извлекаются извлеченныепараметры как

this.activatedRoute.params.subscribe(params => {
  this.productId = params['id'];
});
0 голосов
/ 23 мая 2018

Вы можете просто прочитать об этом в Angular router doc Здесь .Пример в вашем компоненте ngOnInt.

ngOnInit() {
    this.heroes$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        // (+) before `params.get()` turns the string into a number
        this.selectedId = +params.get('id');

      })
    );
  }
...