2016-12-31 1 views
4

내 angular2 앱에서 리디렉션 경로를 만들려고합니다.Angular2 리디렉션 경로가 브라우저 URL을 변경하지 않습니다.

하지만 내 문제는 누군가가 다음 사용자가 'HomeComponent'로 재 'nopath'하지만 URL이 여전히 '/ #/nopath'

을 유지 같은 잘못된 경로를 입력 할 때 나는에 redirectTo 경로를 원하는 것입니다 너무 url을 바꾸십시오! 어떻게해야합니까?

내 HomeComponent 생성자에 if를 넣어 현재 URL을 확인하고 homecomponent로 경로를 변경해야합니까? 아니면 제가 빠진 것이 있습니까?

경로 :

const routes: Routes = [ 
    { path: '', pathMatch: 'full', component: HomeComponent }, 
    { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] }, 
    { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] }, 
    { path: 'users', component: UserComponent, canActivate: [AuthGuard] }, 
    { path: '**', redirectTo: '' } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true}); 

편집 :

이를 시도,하지만 난 홈 구성 요소

const routes: Routes = [ 
    { path: '', pathMatch: 'full' , redirectTo: 'home' }, 
    { path: 'home', component: HomeComponent }, 
    { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] }, 
    { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] }, 
    { path: 'users', component: UserComponent, canActivate: [AuthGuard] }, 
    { path: '**', redirectTo: '' } 
]; 
+0

리디렉션 경로를 사용하지 않고 "**", component : HomeComponent (리디렉션 대신)를 사용하십시오. (NM은 두 가지 방법으로 시도했다. 그래, 나는 이것을하지 않을 것이다). –

+0

최신 Angular2 및 라우터 버전을 사용하고 있습니까? 최근에 비슷한 문제가 발생하여 업데이트가 해결 된 것을 보았습니다. –

+0

라우터의 3.2.3 버전을 사용합니다. 최신 버전이 있는지 확인하는 방법을 모르겠습니다. – Vince

답변

3

당분간, 나는 더 나은 w를 찾지 못했습니다. Angular2 라우터 해킹보다.

여기 내 해결책이 있습니다. 문제를 해결할 수있는 아름다운 방법은 아니지만 적어도 원하는대로 작동합니다!

경로 :

const routes: Routes = [ 
    { path: '', pathMatch: 'full', component: HomeComponent }, 
    { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] }, 
    { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] }, 
    { path: 'users', component: UserComponent, canActivate: [AuthGuard] }, 
    { path: '**', component: HomeComponent, canActivate: [RedirectToHomeGuard] } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true }); 

RedirectToHomeGuard :

@Injectable() 
export class RedirectToHomeGuard implements CanActivate { 

    constructor(private router: Router) { } 

    canActivate() { 
    this.router.navigate(['/']); 
    return false; 
    } 
} 

너희들이 좋은 해결책이 될 수 있다고 생각?

0

당신이 시도해야로 리디렉션을하지 않습니다,

const routes: Routes = [ 
    { path: '', pathMatch: 'full', redirectTo:'home'}, 
    //<<<-----added redirectTo attribute 

    { path: 'home', component: HomeComponent },     
    //<<<----added this line 


    { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] }, 
    { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] }, 
    { path: 'users', component: UserComponent, canActivate: [AuthGuard] }, 

    { path: '**', component: HomeComponent } //<<<--- updated line 
]; 
+0

그것은 작동하지 않습니다, 그것은 URL에 nopath 유지 및 HomeComponent 리디렉션되지 않습니다. – Vince

+0

나는 리디렉션 시도 : '홈'너무 브라우저에서 잘못된 URL을 유지, 밀어 입력을 입력해야합니다. 두 번째 시간 그래서 그것은 애플 리케이션 completly 다시로드하는 URL을 부 변경 ... – Vince

+0

** 브라우저 URL에서 두 번째 시간을 입력 응용 프로그램을 다시로드하고 그 작업을 만들려면 밀어 넣을 필요가 있지만 그것은 이상한 행동 내가 원하는 내 사용자 나쁜 URL을 작성하면 응용 프로그램을 다시로드 할 필요없이 홈 URL로 내 집 컴포넌트로 리디렉션됩니다. – Vince

0

어쩌면 너무 늦었 겠지만 문제는 기본 href 태그가 있어야한다고 생각합니다. 내 index.html을 아래의 코드 같은 것을 사용 : "."

기본적으로
<head> 
    <meta charset="utf-8"> 
    <title>MyCoolApp</title> 
    <base href="."> 
</head> 

HREF를 사용하여 = 라우팅을 망 쳤어. 대신 href = "/"를 사용하면 트릭을 수행 할 수 있습니다.

<head> 
    <meta charset="utf-8"> 
    <title>MyCoolApp</title> 
    <base href="/"> 
</head> 

은 이제 라우팅 작품과 모든 일치하지 않는 노선들은 "**"경로에 끝날 것입니다 "/"기본 URL로 사용되기 때문에 그들이 될이 * 파일을 -bundle.js 찾아 녹이다. 나는 이것이 당신이 "/"로 이동할 때 모든 것이 다시 작동하는 이유라고 생각합니다.

관련 문제