Javascript 在Angular应用程序中通过RouterLink处理动态URL参数

在我的Angular 2应用程序中，我有一个选项卡区域，用户可以从一组独立但与上下文相关的组件中进行选择。当他们单击其中一个链接时，相关组件将根据routerLink中的定义加载，如下所示：

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

public changePage(page, value, type, body)
{
    this.onUserSelection(value, type, body, page);

    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
            this.language_filter = params['language_filter'];
            this.language_selection = params['language_selection'];
        }
    );
    this.router.navigate(
        ['/page1', {
            page: page,
            language_filter: this.language_filter,
            language_selection: this.language_selection,
        }]);
}

{ path: 'page1', component: Page1Component, canActivate: [AuthGuard], data: {contentId: 'page1'} }

此组件的组件代码如下所示：

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

public changePage(page, value, type, body)
{
    this.onUserSelection(value, type, body, page);

    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
            this.language_filter = params['language_filter'];
            this.language_selection = params['language_selection'];
        }
    );
    this.router.navigate(
        ['/page1', {
            page: page,
            language_filter: this.language_filter,
            language_selection: this.language_selection,
        }]);
}

{ path: 'page1', component: Page1Component, canActivate: [AuthGuard], data: {contentId: 'page1'} }

这适用于主要导航方法，这些方法通过路由文件完成，其中每个方法如下所示：

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

public changePage(page, value, type, body)
{
    this.onUserSelection(value, type, body, page);

    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
            this.language_filter = params['language_filter'];
            this.language_selection = params['language_selection'];
        }
    );
    this.router.navigate(
        ['/page1', {
            page: page,
            language_filter: this.language_filter,
            language_selection: this.language_selection,
        }]);
}

{ path: 'page1', component: Page1Component, canActivate: [AuthGuard], data: {contentId: 'page1'} }

然而，对于我提到的这个选项卡区域，它根据硬编码的routerLink参数加载组件。所以我现在意识到，当用户以这种方式导航回一个组件时，而不是通过我们提供的其他方式，它实际上会覆盖URL参数——因为它实际上是在加载page1——因为这是page1

。。。因此，先前添加的URL参数将被删除

所以，我的问题是，有没有一种方法可以编辑此代码：

<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>

---

。。。所以它允许一些动态变量？或者我必须找到一种新方法来处理此选项卡区域中的导航吗？

以下是我使用queryParams的解决方案

首先，可以使用queryParams指令在routerLink指令中传递参数：

<a routerLink="/page1" [queryParams]="fooParams">Page 1</a>
<a routerLink="/page2">Page 2</a>
<router-outlet></router-outlet>

Angular将输出此url，如下所示

href="localhost:4200/page1?language_filter=true&language_selection=english"

接下来要做的是设置一种截取ActivatedRoute的方法，以便可以从ActivatedRouteSnapshot中提取参数值。您可以使用解析器或直接在组件中执行此操作。在我的示例中，我使用了一个解析器：

@Injectable()
export class RoutingResolve implements Resolve<any> {
  resolve(routeSnapshot: ActivatedRouteSnapshot) {
    const { language_filter, language_selection } = routeSnapshot.queryParams;
    return { language_filter, language_selection };
  }
}

然后，在PageOneComponent中，您可以订阅解析的数据并对其执行任何操作，例如，使用它设置表单的值并在表单更改时更新queryParams

有关完整示例，请查看此

确保在单独的窗口中打开预览，以便可以在浏览器中查看管线更改

---

如果导航到第1页，更改表单中的值，然后导航到第2页，然后在浏览器中按back，则可以看到表单中加载的值与url中的参数相对应。

是否尝试过使用queryParams？您的意思是在routerLink中？有一个这样的例子吗？给我一些时间来树立一个例子。。。但最基本的是，您可以将一些参数附加到路由中，而无需使用queryParams指令在路由定义中将它们定义为普通对象。。。然后在智能组件中使用解析器捕获路由快照，在组件中订阅它，并在ngOnInit上更新表单和子组件。然后你可以做一些事情，比如：Link，它将输出的路径看起来像：localhost:4200/foo？animal=dog&bride=poodle期待看到这个样子-谢谢！你能分享一下你的项目中那个特定部分的主要结构吗？所以基本上我的例子和你们想达到的目标很相似，我会尝试一下，然后汇报一下，谢谢。这很有帮助。