如何创建自定义QueryParam并将它们传递给Angular的路由器的NavigationExtras？

Question

我正在尝试在Angular应用程序中实现数据过滤。通常的想法是，用户从下拉字段中选择过滤器，然后单击将过滤器的键值对附加到路由的按钮。

我有2个用于过滤数据的下拉字段。

<!-- CHOOSE ENTITY TYPE DROPDOWN -->
<div class="row mt-3 text-center">
    <div class="col">
        <mat-form-field>
            <mat-label>Entity Type</mat-label>
            <mat-select
                [formControl]="filterEntityType"
                multiple
            >
                <mat-option
                    *ngFor="let option of entityTypes"
                    [value]="option"
                >
                    {{ option }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

<!-- CHOOSE PUBLISHER DROPDOWN -->
<div class="row text-center">
    <div class="col">
        <mat-form-field>
            <mat-label>Publisher</mat-label>
            <mat-select
                [formControl]="filterPublisher"
                multiple
            >
                <mat-option
                    *ngFor="let option of publishers"
                    [value]="option"
                >
                    {{ option }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>                    

用户进行选择，该选择可以是多个]，然后单击Apply按钮。

<button
    type="button"
    class="btn btn-primary btn-lg m-1"
    (click)="applyFilters()"
>
    Apply
</button>
单击按钮后，将执行以下方法

applyFilters() {
    let appliedFilters: Params = [];

    if (this.filterEntityType.value && this.filterEntityType.touched) {
        this.filterEntityType.value.forEach(element => {
            appliedFilters.push({ ["type"]: element });
        });
    }
    if (this.filterPublisher.value && this.filterPublisher.touched) {
        this.filterPublisher.value.forEach(element => {
            appliedFilters.push({ ["publisher"]: element });
        });
    }
    this.router.navigate(["/workspace"], {
        queryParams: appliedFilters,
        relativeTo: this.route
    });
}
如您所见，我正在尝试创建类型为appliedFilters的局部变量Params，并根据选择的过滤器将key-value对放入其中。之后，我只需将appliedFilters从路由器的queryParams传递到NavigationExtras。

组件的

默认URL（未选择过滤器时，）]

为/sample/workspace。选择适合的人之后，我想要一个看起来像/sample/workspace?type=footype1&type=footype2&publisher=foopublisher的URL。

type重复，因为接受了多个过滤器选择。

Howerver

，看来路由器无法读取key-value对，而是显示Object。因此，我最终得到以下URL/sample/workspace?0=%5Bobject%20Object%5D&1=%5Bobject%20Object%5D&2=%5Bobject%20Object%5D。

我正在尝试在Angular应用程序中实现数据过滤。通常的想法是，用户可以从下拉字段中选择过滤器，然后单击一个在键后面添加按钮的按钮。...

Answer 1

当要传递相同键的多个值时，请以逗号分隔发送。还将JSON对象而不是数组作为queryparams传递。