2016-10-29 8 views
7

角度2のアプリにqueryParamsparamsのURLがあります。私は問題が残っている:ページをリロードした後、私のURLが歪んだ。 paramsリロード後の角度2のURLの変更

:リロード後

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

queryParams

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

:リロード後

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); 
とナビゲーション:

[routerLink]="['/albums/:id', {id: album.id}] 

queryParamsとナビゲーション:あなたのリロードqueryparams URLをデコードするURLの後に

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

ナビゲーションコードに問題があります。ナビゲーションを扱う場所でコンポーネントを表示できますか? –

+0

私は同じ問題があります。 – aycanadal

答えて

1

、私はこの取得:

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

をそれは本質的に同じですあなたの元のURLが、完全にエンコードされたparamsで暗号化されます。

更新:あなたはURLデコードを強制する方法についての参照が必要な場合は

は、あなたがexmapleは、以下のコードを参照するためにRouteLink自体でのparamを渡しthis previous stack overflow question

1

で見ることができ

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

ルーティングでこのように宣言する

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

albumscomponent.tsでは、activaterouteを使用してurlパラメータを読み取ります。

関連する問題