重载后角度2网址的变化

Question

我的角度2应用中有libGL和queryParams的网址。而且我遇到了问题：重新加载页面后，我的网址被扭曲了。

params：

  

http://127.0.0.1:8000/albums?user_id=1

重装后

：

  

http://127.0.0.1:8000/albums/?user_id=1

params：

  

http://127.0.0.1:8000/albums/%3Aid;id=13

重装后

：

  

http://127.0.0.1:8000/albums/%3Aid%3Bid%3D13

routes.ts

queryParams

使用import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './components/home/home.component'; import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; import { AlbumsComponent } from './components/albums/albums.component'; import { AddAlbumComponent } from './components/albums/add-album.component'; import { AddImageAlbumComponent } from './components/albums/add-image-album.component'; import { AlbumDetailComponent } from './components/albums/album-detail.component'; import { PhotosComponent } from './components/photos/photos.component'; import { UsersComponent } from './components/users/users.component'; import { AuthGuard } from './guards/auth.guard' const appRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }, { path: 'albums', component: AlbumsComponent, canActivate: [AuthGuard] }, { path: 'add-album', component: AddAlbumComponent, canActivate: [AuthGuard] }, { path: 'add-image-album/:id', component: AddImageAlbumComponent, canActivate: [AuthGuard] }, { path: 'albums/:id', component: AlbumDetailComponent, canActivate: [AuthGuard] }, { path: 'photos', component : PhotosComponent, canActivate: [AuthGuard] }, { path: 'users', component : UsersComponent, canActivate: [AuthGuard] } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 导航：

params

使用[routerLink]="['/albums/:id', {id: album.id}] 导航：

queryParams

Answer 1

在url解码重新加载的queryparams网址后，我得到了这个：

http://127.0.0.1:8000/albums/:id;id=13

它与原始网址基本相同，但是params完全按网址编码。

<强>更新

如果您需要有关如何强制解码网址的参考，可以查看this previous stack overflow question

Answer 2

将路径链接中的参数传递给exmaple，请参阅以下代码

[routerLink]="[/albums,nav.param]"

在路由声明中就像这样

{ path: 'albums/:id', component: AlbumsComponent }

在albumscomponent.ts中使用activateroute读取url param值。