Angular 带可选参数的路由

Question

我使用 angular 和可选参数。我使用 navigate:

路由到某个位置

router.navigate(["route1"], { p1: v1 });

我看到了位置

/route1;p1=v1

现在我尝试导航到

/route1;p1=v1 ;p2=v2

我搜索类似

router.navigate({ p2: v2 }, relative);

但我在寻找有效语法时遇到问题。

Answer 1

要允许组件路由有多个可选参数，在路由模块中，按如下方式指定路由：

const appRoutes: Routes = [
    ...
  {path: 'route1',component: MyComponent}
    ...
];

在您希望从中调用 MyComponent 的调用组件中，使用路由器 navigate() 方法如下：

router.navigate(['route1', {p1:value1,p2:value2}]);

其中 value1 和 value2 是调用组件中的变量你想绑定到参数 p1 和 p2。

以上应该匹配路由的参数 p1、p2 或 p1 和 p2。

在 HTML 模板中，使用以下路由器调用上述内容 link:

<a [routerLink]="['/route1', {p1:value1, p2:value2}]" .. />

路由器 URL link 将解析为：

/route1;p1=value1;p2=value2

以下路由器 link:

<a [routerLink]="['/route1', {p1:value1}]" .. />

将解析为 URL:

/route1;p1=value1

以及以下路由器link：

<a [routerLink]="['/route1', {p2:value2}]" .. />

将解析为 URL:

/route1;p2=value2

注意：如果你在你的路由器link中省略括号[]，那么包含参数会出现以下错误：

Error: Cannot match any routes. URL Segment: ...

在您的组件 MyComponent 中，使用 paramMap 读取参数，如下所示：

const p1 = this.route.snapshot.paramMap.get('p1');
const p2 = this.route.snapshot.paramMap.get('p2');

路由参数paramMap是一个observable，在应用内调用同一个路由时会发生变化，所以建议在组件内订阅如下：

routingSubscription: Subscription;

constructor(private activatedRoute: ActivatedRoute, 
    private router: Router) { }

ngOnInit(): void {
    let route = this.activatedRoute.snapshot;
    let urlSegments = route['_urlSegment'].segments;
    let relativePath: string = '';
    urlSegments.forEach((pathSegment: UrlSegment) => {
        relativePath = relativePath.concat(pathSegment.path, '/');
    });

    this.routingSubscription = this.activatedRoute.paramMap
      .subscribe((params: ParamMap) => {
            const firstParam: string = params.get('p1');
            const secondParam: string = params.get('p2');

            if (firstParam && !secondParam)
            {
              let mySecondParam: string = "2";
              this.router.navigate(
                  [relativePath, {p1:firstParam,p2:mySecondParam}]);
            }
      });
}

上面的示例将允许使用第一个参数路由到组件，然后使用原始路由的相对路径重新路由回去。这也应该在功能模块中工作。

或者，可以在不量化活动路线中的各个路径段的情况下指定相对路径。这可以使用 router.Navigate().

中的 relativeTo 选项来完成

要使用relativeTo，导入NavigationExtras接口如下：

import { NavigationExtras } from '@angular/router';

然后我们可以如下指定和扩展导航：

this.router.navigate(
    [{id1:firstParam,id2:mySecondParam}], 
    { relativeTo: this.activatedRoute }
);

Angular 带可选参数的路由

Angular routing with optional parameters

angular-ui-router

angular