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

当前链接类

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¶ms={{i}}

我找到了字符串，但它转义到

%3F和%3D

html

{{item.name}


点击它

ts

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
defaultLink='测试'；
arr=Array.from（{length:10}，（{u，i）=>（{name:`navlinkitem${i}`，link:i}））；
otherComponentChangeLink（）{
常量additionalParams='form=1'
this.defaultLink='other test/'+'？'+附加参数；
//像这样改变链接
// http://..../other-test/?form=1¶ms={{i}
}
}

您应该使用属性绑定而不是插值，如：

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

{{item.name}

---

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

应该使用属性绑定而不是插值，如：

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

{{item.name}

---

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

您需要为此使用路由器包

添加处理路由的构造函数

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" } })

然后，您可以使用navigate或使用navigateByUrl重建链接

---

您需要使用路由器软件包进行此操作

添加处理路由的构造函数

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" } })

然后，您可以使用navigate或使用navigateByUrl重建链接

称为URL编码

默认情况下，Angular使用其默认值对每个URL进行编码

为了防止Angular对URL中的某些字符进行编码（在您的例子中是

=

和

？

），您需要编写自定义URL序列化程序

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

自定义url序列化程序.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, '=');
    }
}

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 { }

应用程序模块.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, '=');
    }
}

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 { }

从'@angular/core'导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule}；
从'@angular/forms'导入{FormsModule}；
从'@angular/router'导入{RouterModule，Routes}；
从“./custom url serializer”导入{CustomUrlSerializer}
从'@angular/router'导入{UrlSerializer}；
从“./app.component”导入{AppComponent}；
从“./hello.component”导入{HelloComponent}；
@NGD模块({
导入：[BrowserModule、FormsModule、RouterModule.forRoot（[]）]，
声明：[AppComponent，HelloComponent]，
引导：[AppComponent]，
提供程序：[{provide:UrlSerializer，useClass:CustomUrlSerializer}]//
称为URL编码

默认情况下，Angular使用其默认值对每个URL进行编码

为了防止Angular对URL中的某些字符进行编码（在您的例子中是
=
和
？
），您需要编写自定义URL序列化程序

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

自定义url序列化程序.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, '=');
    }
}

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 { }

应用程序模块.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, '=');
    }
}

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 { }

从'@angular/core'导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule}；
从'@angular/forms'导入{FormsModule}；
从'@angular/router'导入{RouterModule，Routes}；
从“./custom url serializer”导入{CustomUrlSerializer}
从'@angular/router'导入{UrlSerializer}；
从“./app.component”导入{AppComponent}；
从“./hello.component”导入{HelloComponent}；
@NGD模块({
导入：[BrowserModule、FormsModule、RouterModule.forRoot（[]）]，
声明：[AppComponent，HelloComponent]，
引导：[AppComponent]，
提供程序：[{provide:UrlSerializer，useClass:CustomUrlSerializer}]//在当前组件中很容易做到这一点。我不知道如何在另一个组件中更改链接，保留当前参数并添加另一个queryParam。嘿，你可以在当前组件中做到这一点。在当前组件中很容易做到这一点。我不知道如何在另一个组件中更改链接，保留当前参数并添加另一个queryParam。hey、 您可以在当前组件中执行此操作此操作可用于导航，@wgf4242希望通过单击按钮而不是导航来更改URL。此操作可用于导航，@wgf4242希望通过单击按钮而不是导航来更改URL。这是一个非常好的答案。但是否可以制作一个指令来完成此任务。这是一个r回答得很好。但是有没有可能制定一个指令来完成这项任务呢。