[英]Angular router - use [routerLink] to navigate on component
how do I route from localhost:4200/home
to localhost:4200/home#app=1111
?如何从
localhost:4200/home
路由到localhost:4200/home#app=1111
?
I tried something like:我试过类似的东西:
home.component.html home.component.html
<a class="app-card" [routerLink]="['/HOME']" [queryParams]="{'app':'1111'}">
But then nothing happen.但随后什么也没有发生。 And
queryParams
uses ?
和
queryParams
使用?
instead of #
for routing.而不是
#
用于路由。
home.module.ts home.module.ts
RouterModule.forChild([
{
path: '',
component: HomeComponent,
}
]),
Does anyone have an idea?有人有想法吗?
Thank you!谢谢!
You can pass optional parameters to the routerLink
as further object:您可以将可选参数作为进一步的
routerLink
传递给 routerLink:
<a class="app-card" [routerLink]="['/HOME', {'app':'1111'}]">
In this case the output is: /HOME;app=1111
在这种情况下,output 是:
/HOME;app=1111
UPDATED更新
To have optional queryParams, you can add the following routes:要拥有可选的 queryParams,您可以添加以下路由:
{ path: 'home', component: HomeComponent }
{ path: 'home/:app', component: HomeDetailComponent }
So you will have the following matches:因此,您将有以下匹配项:
/home matches => path: 'home'
/home/1111 matches => path: 'home/:app'
UPDATE 2更新 2
// app-routing.module.ts
RouterModule.forRoot([
{
path: 'home',
loadChildren:() => import('....').then(m => m.HomeModule),
}
])
If you use child routes, you need to add a further parameter to the path:如果使用子路由,则需要在路径中添加更多参数:
// home-routing.module.ts
RouterModule.forChild([
{
path: ':app',
component: HomeComponent,
}
])
And in your template:在您的模板中:
<a class="app-card" [routerLink]="['/HOME']" [queryParams]="{'app':'1111'}">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.