要在Angular 7中添加路由,可以按照以下步骤进行操作。
首先,确保已安装了Angular CLI。如果尚未安装,请使用以下命令进行安装:
npm install -g @angular/cli
接下来,创建一个新的Angular项目并进入项目目录:
ng new my-app
cd my-app
在项目中,可以使用Angular CLI生成一个新的组件,并在其中添加路由。使用以下命令生成一个新的组件:
ng generate component home
这将在src/app目录下生成一个名为home的组件,并自动在app.module.ts文件中导入该组件。
接下来,打开app.module.ts文件,并添加以下代码:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent }
];
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在上述代码中,我们首先导入了RouterModule和Routes模块,然后定义了一个名为routes的路由数组。数组中的每个对象都包含了一个路径和相应的组件。
在@NgModule装饰器中,我们将RouterModule的forRoot方法添加到imports数组中,以便将路由配置应用于应用程序。
接下来,打开app.component.html文件,并添加以下代码:
My App
在上述代码中,我们使用routerLink指令将路由链接到home组件,并使用routerLinkActive指令为当前激活的路由链接添加一个类名。
最后,运行应用程序并查看效果。使用以下命令启动应用:
ng serve
打开浏览器并访问http://localhost:4200,您将看到一个包含"Home"链接的页面。单击链接将显示home组件的内容。
希望这能帮助到你!