angular - 如何通过 routerLink 指令指定查询参数

标签 angular angular2-routing angular2-directives angular2-router angular2-router3

我正在试用新路由器(版本 3.0.0-alpha.7),想知道如何通过 routerLink 指令指定查询参数?

下面的 Router.navigate() 方法生成一个类似 http://localhost:3000/component-a?x=1 的 URL

this.router.navigate(['/component-a'], {queryParams: {x: 1}});

但是,我不知道如何用 routerLink 指令做同样的事情。像下面这样的模板返回解析器错误...

<a [routerLink]="['/component-a'], {queryParams: {x: 1}}">Component A</a>

我能得到的最接近的是http://localhost:3000/component-a;x=1 ,它使用子路由的语法。

<a [routerLink]="['/component-a', {x:1}]">Component A</a>

最佳答案

你可以这样做

<a [routerLink]="['/component-a']" [queryParams]="{x: 1}">Component A</a>

关于angular - 如何通过 routerLink 指令指定查询参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38342198/

相关文章:

javascript - Angular 如何动态更改数组中的值

javascript - Angular ag-grid : "Could not find component class XXX, did you forget to configure this component" 出错

Angular2 对预检请求的响应未通过访问控制检查 : No 'Access-Control-Allow-Origin' header is present on the requested resource

Angular2 路由 : redirectTo a relative url

angular - 如何使用 angular2 在正文上附加内容

javascript - Angular 2 -bypassSecurityTrustHtml 以及bypassSecurityTrustScript

angular - 不使用 mat-error、ng-template 和 *ngTemplateOutlet 进行渲染

Angular 2获取当前路线

javascript - Angular 2执行登录身份验证(我进入无限循环。)

ecmascript-6 - 如何修复嵌入模板上的任何指令未使用的属性绑定(bind) ng-forOf?