要使用Angular 8中的路由功能,需要遵循以下步骤:
首先,确保已经安装了最新版本的Angular CLI,并创建了一个新的Angular项目。
在项目的根目录中,打开命令行窗口,并运行以下命令来安装路由模块:
npm install @angular/router
app.module.ts
文件,并导入路由模块:import { RouterModule } from '@angular/router';
@NgModule
装饰器的imports
数组中,将路由模块添加为依赖项:@NgModule({
imports: [
RouterModule.forRoot(routes)
],
// ...
})
export class AppModule { }
app.component.html
文件中,创建一个包含路由链接的导航栏:
app.component.ts
文件中,定义路由配置:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent { }
创建每个路由对应的组件,例如home.component.ts
、about.component.ts
和contact.component.ts
。
在app.module.ts
文件中,导入这些组件:
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' } // 默认路由
];
@NgModule
装饰器的imports
数组中,配置路由:@NgModule({
imports: [
RouterModule.forRoot(routes)
],
// ...
})
export class AppModule { }
index.html
文件中添加一个
标签:
现在,当用户点击导航栏中的链接时,Angular会根据路由配置加载相应的组件,并将其渲染到
元素中。