Angular2路由器「覆蓋」模板

我實現了路由到我的應用程序，但它不按預期工作。當我點擊Login按鈕時，它應該導航到一個新的登錄頁面，但是它會在主頁面內創建一個登錄頁面（VehicleComponent）。下面的代碼：Angular2路由器「覆蓋」模板

APP-routing.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { VehicleComponent } from './vehicle.component'; 
import { LoginComponent } from './login.component'; 

const routes: Routes = [ 
    //{ path: '', redirectTo: '/vehicle', pathMatch: 'full' }, 
    { path: 'vehicle', component: VehicleComponent }, 
    { path: 'login', component: LoginComponent } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { }

的VehicleComponent.ts

toLogin(): void { 
    console.log("toLogin button"); 
    this.router.navigate(['login']); 
    }

模板

<router-outlet></router-outlet> 
<button class="btn btn-default" type="button" (click)="toLogin()">Login</button>

部分

LoginComponent

onSubmit(): void { 
    console.log("Submit button"); 
} 
goBack(): void { 
    console.log("Back button"); 
    this.location.back(); 
}

按鈕「後退」上LoginComponent工作正常，在VehicleComponent只是「登錄」被打破了。任何想法如何解決這個問題？

來源

2017-02-02 Haseoh

'this.router.navigate（['/ login']）;' – anshuVersatile

我試過了，但它也不起作用。 – Haseoh

如果您通過直接輸入網址訪問http：// yoursite/login，您會看到什麼？ ' – AngularChef

我設法解決了這個問題。我添加了另一個組件，只是作爲<router-link></router-link>的佔位符，然後在我的app-routing.module中取消註釋{ path: '', redirectTo: '/vehicle', pathMatch: 'full' }。現在它按預期工作。

來源

2017-02-02 08:52:45 Haseoh

Angular2路由器「覆蓋」模板

回答

相關問題