Angular2路由器“覆盖”模板

Question

我已将路由实施到我的应用，但它无法按预期工作。当我单击“登录”按钮时，它应该导航到新的登录页面，而是在主页面（VehicleComponent）内创建登录页面。这是代码：

应用-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上的按钮“Back”工作正常，只是在VehicleComponent上“Login”被破坏。知道如何解决这个问题吗？

Answer 1

我设法解决了这个问题。我添加了另一个组件，只是作为<router-link></router-link>的占位符，然后在我的 app-routing.module 中取消注释{ path: '', redirectTo: '/vehicle', pathMatch: 'full' }。现在它按预期工作。