0
我实现了路由到我的应用程序,但它不按预期工作。当我点击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只是 “登录” 被打破了。任何想法如何解决这个问题?
'this.router.navigate(['/ login']);' – anshuVersatile
我试过了,但它也不起作用。 – Haseoh
如果您通过直接输入网址访问http:// yoursite/login,您会看到什么? ' – AngularChef