Question

如何从复杂的seo url中提取参数，例如 domain.com/product-samsung-tv-34.html 其中34是要传递给相应组件的参数。

Answer 1

对于任何需要处理UrlMatcher的人。

if (segments.length === 1) {
    return {
      consumed: segments, posParams: {
        id: segments[0]
      }
    };
  }

这是默认实现的方式。

Answer 2

您可以在Angular路由器doc Here中阅读相关内容。组件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');

      })
    );
  }

Answer 3

使用Angular 6匹配器和正则表达式的解决方案使用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'];
});

如何使用Angular 6路由器UrlMatcher匹配器从复杂URL中提取和传递url参数

3 个答案: