Question

我正在queryParams内传递带有[routerLink]的动态生成的URL，它会中断路由。

即：this.url = '/question/ask?details=1'

<a [routerLink]="url"> {{ data.name }}</a>

当我们将鼠标悬停在上面时，它看起来像#/question/ask%3Fdetails%3D1，并在单击时中断。

P.S：由于我要传递动态URL，所以不可能分别传递[queryParams]，但这可行：

<a [routerLink]="/question/ask" [queryParams]={details: 1}> {{ data.name }}</a>

任何解决方案都可以在queryParams内传递带有[routerLink]的完整URL吗？

Answer 1

简短答案：

无论您在routerLink指令中传递什么，最终都会对传递的值调用encodeURI函数。

长期回答

之所以会这样，是因为当您直接在routerLink内部传递整个url时，它最终会调用routerLink指令的serializeUrl方法。 serialize的哪个调用方法urlSerializer。序列化方法的实现如下所示。 code link here

serialize(tree: UrlTree): string {
    const segment = `/${serializeSegment(tree.root, true)}`;
    const query = serializeQueryParams(tree.queryParams);
    const fragment =
        typeof tree.fragment === `string` ? `#${encodeUriFragment(tree.fragment !)}` : '';

    return `${segment}${query}${fragment}`;
}

export function encodeUriFragment(s: string): string {
    return encodeURI(s);
}

解决此问题的可能方法是，使用角度Router的内置方法parseUrl解码URL。基本上可以帮助您找到root和URL，params等中的queryParams

组件

@Component({
  ...
})
export class AppComponent {
  name = 'Angular 6';
  url: any;
  formattedUrl: any;
  params: any = {};

  constructor(private router: Router) {
  }

  ngOnInit() {
    this.urlDecoder();
  }

  urlDecoder() {
    this.url = '/a?i=1 a';
    let parsedUrl = this.router.parseUrl(this.url);
    console.log(parsedUrl)
    const g: UrlSegmentGroup = parsedUrl.root.children[PRIMARY_OUTLET];
    const s: UrlSegment[] = g.segments;
    this.formattedUrl = `${s.map(p => p.path).join('/')}`; // this is required to combine all continued segment
    this.params = parsedUrl.queryParams;
  }
}

HTML

<a [routerLink]="formattedUrl" [queryParams]="params">
  Link Here
</a>

Demo Stackblitz

Answer 2

尝试一下：

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {

        services.AddSignalR();

        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, IApplicationLifetime applicationLifetime)
    {

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();

        }
        else
        {
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();


        app.UseSignalR(routes =>
        {
            routes.MapHub<OrgHub>("/rpc");
        });


        app.UseMvc();


    }
}

HTML：

this.url = ['/question', 'ask']; //Maybe without slash: ['question', 'ask']
this.query = {details: 1};

RouterLink中的QueryParams不起作用

2 个答案: