重新加載后角度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參數值。