我刚开始学习Angular2并创建了一个示例项目,我需要在三个页面之间进行路由。
我在app.module.ts中创建了一个RouterModule,如下所示
@NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{path:'login',component : loginComponent},
{path:'logout',component :logoutComponent},
{path:'home',component : homeComponent}
])
我的app.component.ts如下:
@Component({
selector: 'my-app', // <my-app></my-app>
providers: [Wakanda],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
我的loginComponent.ts
@Component({
selector:'login',
template : `
<h1>Login</h1>
`
})
我的logoutComponent.ts
@Component({
selector:'logout',
template : `
<h1>Login</h1>
`
})
my homeComponent.ts
@Component({
selector : 'home',
template : `
<h1>Login</h1>
`
})
我的app.component.html
<header>
<nav>
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li>
<a routerLink ="./home">Home</a>
</li>
<li class="active">
<a routerLink="./login">LogIn</a>
</li>
<li>
<a routerLink="./logout">Log out</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<router-outlet></router-outlet>
</main>
当我编译程序时,我收到错误
EXCEPTION:未捕获(承诺):错误:无法匹配任何路线:''
任何人都可以帮我解决这个问题
提前致谢
答案 0 :(得分:2)
尝试设置一些基本全球路线,包括空路线和捕捉所有路线。
以下是app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found.component';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, { enableTracing: true })
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
这是app.module.ts
import { AppRoutingModule } from './app-routing.module';
...
@NgModule({
imports: [
...
AppRoutingModule // Make sure this one is last
],
bootstrap: [AppComponent]
})
export class AppModule { }
只要路由与先前定义的路由不匹配且PageNotFoundComponent
路径与空路由匹配<router-outlet>
,''
就会显示在localhost:4200/
(它是基本组件) 1}})。
您需要在AppRoutingModule
中导入最后一个AppModule
,因为路由器会按照注册顺序匹配路由。通过最后导入“匹配任何”路线,您将确保首先检查所有其他路线。
将路由的enableTracing
设置为true,以帮助在开发时调试导航更改。
这应该是一个开始的好地方
答案 1 :(得分:0)
我想到了问题,我错过了在RouterModule中添加默认路径
{path:'',redirectTo:'/ login',pathMatch:'full'}