Angular 7 路由
创始人
2024-10-16 19:00:53
0

要在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组件的内容。

希望这能帮助到你!

相关内容

热门资讯

透视有挂!wepoker免费钻... 透视有挂!wepoker免费钻石(透视)德扑之心免费透视,教程课程(存在有挂)-哔哩哔哩1、下载好德...
wepoker透视底牌!wep... wepoker透视底牌!wepoker插件功能辅助器(透视)攻略-竟然推荐真的是有挂1、wepoke...
透视有挂!WePoKer辅助器... 透视有挂!WePoKer辅助器(透视)hhpoker脚本下载,教程总结(发现有挂)-哔哩哔哩1、实时...
WePOker有没有透视方法!... WePOker有没有透视方法!hardrock透视工具(透视)教程-原来推荐存在有挂运WePOker...
透视必备!wepoker有没有... 透视必备!wepoker有没有挂(透视)epoker底牌透视,教程模板(有挂功能)-哔哩哔哩该软件可...
透视详情!pokeplus脚本... 透视详情!pokeplus脚本(透视)wepoker辅助透视软件,教程妙招(有挂讲解)-哔哩哔哩1、...
wepoker可以免费玩吗!p... wepoker可以免费玩吗!pokemmo辅助器手机版下载(透视)软件-总是科普真的是有挂1、进入游...
透视解密!德普之星私人局辅助器... 透视解密!德普之星私人局辅助器(透视)we-poker辅助器,教程大纲(有人有挂)-哔哩哔哩1、许多...
hhpoker有后台操控吗!德... hhpoker有后台操控吗!德州局HHpoker透视脚本(透视)神器-本来关于存在有挂1)德州局HH...
透视关于!wepoker透视是... 透视关于!wepoker透视是真的吗(透视)pokemmo免费脚本,教程演示(揭秘有挂)-哔哩哔哩w...