Question

当前链接

http://.../test/0?params=0
http://.../test/1?params=1
...
http://.../test/10?params=10

我想将test替换为other-test并保留queryParams，然后像这样添加另一个queryParams form=1。

http://..../other-test/?form=1&params={{i}}

我连接了该字符串，但是它转义到%3F and %3D。

https://stackblitz.com/edit/angular-router-unescapse

html

<ul>
    <li *ngFor="let item of arr">
        <a routerLink="{{defaultLink}}/{{item.link}}" [queryParams]="{params: item.link}">{{item.name}}</a>
    </li>
</ul>

<button (click)="otherComponentChangeLink()">Click it </button>

ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  defaultLink = 'test';

  arr = Array.from({length: 10}, (_, i) => ({name: `NavLink item ${i}`, link: i}));

  otherComponentChangeLink() {
    const additionalParams = 'form=1'
    this.defaultLink = 'other-test/' + '?' + additionalParams;
    // change link like this
    // http://..../other-test/?form=1&params={{i}}
  }
}

Answer 1

它被称为URL编码

默认情况下，Angular使用其默认的URLSerializer

对每个URL进行编码

为了防止Angular在您的URL中编码某些字符（在您的情况下为=和?），您需要编写自定义URL Serailizer 。 / p>

在您的情况下，将是这样：

custom-url-serializer.ts

import {UrlSerializer, UrlTree, DefaultUrlSerializer} from '@angular/router';

export class CustomUrlSerializer implements UrlSerializer {
    parse(url: any): UrlTree {
        let dus = new DefaultUrlSerializer();
        return dus.parse(url);
    }

    serialize(tree: UrlTree): any {
        let defaultUrlSerializer = new DefaultUrlSerializer(),
            defaultPath = defaultUrlSerializer.serialize(tree);
        // Here I've replace %3F with ? and %3D with = to stop URL encoding for these characters
        return defaultPath.replace(/%3F/g, '?').replace(/%3D/g, '=');
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {RouterModule, Routes} from '@angular/router';
import { CustomUrlSerializer } from'./custom-url-serializer'
import {UrlSerializer} from '@angular/router';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule,  RouterModule.forRoot([]) ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [{ provide: UrlSerializer, useClass: CustomUrlSerializer }] // <- add this line
})
export class AppModule { }

更新了Stackblitz

Answer 2

您应该使用属性绑定，而不是像这样的插值：

<a [routerLink]="defaultLink+'/'+item.link" [queryParams]="{params: item.link}">{{item.name}}</a>

并且您不应该像在otherComponentChangeLink（）中那样使用字符串操作添加queryParams，这就是为什么在链接中获取转义序列％3F和％3D的原因。

Answer 3

您将需要使用路由器软件包。

添加一个处理路由的构造函数。

constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      //Store params here
    }); 
}

在otherComponentChangeLink中：

this.router.navigate(["http://..../other-test?form=1"], { queryParams: { param1: "storedParams" } })

然后，您可以使用Navigation重建链接，或使用navigationByUrl

Angular docs Router
NavigateByUrl

按其他组件的角度更改RouteLink并添加其他queryparam

3 个答案: