在 Angular 应用程序中通过 RouterLink 绑定 URL 参数

Question

我想了解加载 routerLink 的同时拉入保存的 url 参数的基本实现是什么样的。通常，我在我的应用程序中处理路由的方式是通过订阅一个 observable，它看起来像这样：

private onFilterProcessed(value: any, type: string, body, page)
{
    if (type === 'zip')
    {
        this.processType('addresses.zip', value);
    } if (type === 'location')
    {
        this.processType('addresses.city', value);

    this.filtersService.getByCategory(
        page, this.pagesize, this.body)
        .subscribe(resRecordsData => {
            let data = resRecordsData.data;
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
}

这允许我将一些过滤器参数作为 POST 请求正文的一部分传递给 api 调用。这将 return 结果在 return 数据之前传递用户的过滤器选择。

这一切都按预期工作。当用户进入 "back" 到之前加载的组件时，他们之前的过滤器选择将被传递到 api 调用中，因此 "page" 看起来就像他们上次在那个 page/component.

但是，我的应用程序中也有几个部分是通过 routerLink 加载组件的。他们最初看起来像这样：

<a routerLink="/customer-history" routerLinkActive="selected">Customer History</a>

问题是，既然我在 url 中有过滤器参数，仅此一项是行不通的，因为每次我单击这些特定的 link 时，它都会清除url 并仅使用页面标识符 "customer-history" 重新加载它——因为这就是我目前告诉它要做的。

例如，如果用户使用过滤器根据城市过滤结果，url 将如下所示：

http://localhost:4200/customer-history;locations=true;locations_place=Seattle

所以问题是，如果他们点击离开，然后通过 routerLink link RETURN 到那个 page/component，而不是获取该页面的过滤数据，它会加载这个：

http://localhost:4200/customer-history

所以我的问题是关于如何将那些 url 参数作为 routerLink 的一部分传递进来。我假设它看起来像这样，带有用于绑定的方括号：

<a [routerLink]="['/customer-history', getParams()]" routerLinkActive="selected">Customer History</a>

我不清楚的是我如何获得那些特定的 url 参数（只是过滤器参数，而不是 component/page 名称）并通过这样的绑定将它们传递进来。

我知道 Angular 使 activatedRoute.snapshot 可用，我可以这样得到它，以传递到 getParams():

getParams()
{
    return this.activatedRoute.snapshot;
}

但这将 return 完整 url，而不仅仅是过滤器参数部分，这正是我所需要的。那么我如何获得我需要的 url 的部分，并将它传递到这里以附加到 url 中的 "customer-history"？在基本实现中会是什么样子？

Answer 1

解决此问题的一种方法是在订阅和导航到该页面和所有相关 url 参数时传递解析正确 page/component 的函数，而不是在模板中使用 routerLink .

为此，我在视图中执行此操作：

<a (click)="goToCustomerHistory()">Customer History</a>

组件中的函数如下所示：

goToCustomerHistory()
{
    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
            this.locations = params['locations'];
            this.locations_place = params['locations_place'];
        }
    );
    this.router.navigate(
        ['/customer-history', {
            page: this.page,
            locations = this.locations;
            locations_place = this.locations_place;
        }]);
}

当然，你还需要导入Router和ActivatedRoute，并在构造函数中注入：

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

在 Angular 应用程序中通过 RouterLink 绑定 URL 参数

Binding URL Params via RouterLink in Angular App

javascript

routing

typescript

routerlink

angular