我的路由app-routing.module.ts
import { Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes ,RouterModule} from '@angular/router';
import { StudentComponent } from './student/student.component';
import { StudentdetailComponent } from './studentdetail/studentdetail.component';
const routes:Routes=[
{
path:'student',component:StudentComponent
},
{
path:'studentdetail',component:StudentdetailComponent
}
];
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class AppRoutingModule { }
student.component.html
<p>student works!</p>
studentdetail.component.html
<p>studentdetail works!</p>
测试.component.html
<a [routerLink] ="['/student']">Student</a><br/>
<a [routerLink] ="['/studentdetail']">Student Details</a><br/>
<div>
<router-outlet></router-outlet>
</div>
appmodule.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {Test} from './test.component';
import { TopComponent } from './top/top.component';
import { AppRoutingModule } from './app-routing.module';
import { StudentComponent } from './student/student.component';
import { StudentdetailComponent } from './studentdetail/studentdetail.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
AppComponent,
Test,
TopComponent,
StudentComponent,
StudentdetailComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot([])
],
providers: [],
bootstrap: [Test]
})
export class AppModule { }
当我单击“学生”和“学生详细信息”链接时。执行 F12 后出现以下错误
未捕获(承诺):错误:NG04002:无法匹配任何路由。 URL 段:“学生” 错误:NG04002:无法匹配任何路由。 URL 段:'学生'
在您的
AppModule.ts
中,您必须删除此行:RouterModule.forRoot([])
然后转到您的
app-routing.module.ts
并将此行放入导入/导出中:
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule]
然后它应该可以工作。
在您的 app-routing.module.ts 中,您需要将其添加到导入和导出中:
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forRoot(routes) // Add this to configure the RouterModule with the routes
],
exports: [RouterModule] // Add this to make sure that the router directives are available elsewhere in the app
将 export 添加到 app-routing.module.ts 中的路由:
import { RouterModule, Routes } from "@angular/router";
export const routes:Routes=[
{
path:'student',component:StudentComponent
},
{
path:'studentdetail',component:StudentdetailComponent
}
];
@NgModule({
declarations: [],
imports: [
CommonModule
],
exports : [RouterModule]
})
export class AppRoutingModule { }
导入从app-routing.module.ts应用程序模块中导出的路由:
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot([routes])
],