重新加载后角度2网址的更改

Question

我在我的角度2应用中使用queryParams和params。而我坚持的问题：重新加载页面后我的网址扭曲。

与params：

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

重装后：

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

与queryParams：

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

重装后：

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

routes.ts

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：

[queryParams]="{user_id: dataService.getCurrentUserId()}" 

Answer 1

网址解码您重装上阵queryparams URL后，我得到这个：

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

它本质上是一样的你的原始网址，但参数完全由网址编码。

更新：

如果您需要关于如何迫使解码的URL的引用，你可以看看this previous stack overflow question

Answer 2

传递帕拉姆在RouteLink本身〔实施例见下面的代码

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

并在路由声明这样

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

然后在albumscomponent.ts中使用activateroute读取url参数值。