Angular7使用路由

最新推荐文章于 2024-03-06 05:24:22 发布

原创最新推荐文章于 2024-03-06 05:24:22 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#angular #路由 #router

Angular 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Angular7中如何引入和配置路由组件，包括命令行操作、修改app-router.component.ts、添加路由定义和出口，以及处理APP_BASE_HREF错误的方法，提供了详细步骤和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular 引入路由组件

1 ：命令行运行

ng generate module app-routing --flat --module=app

2：将app-router.component.ts 改成：

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

3：添加路由定义，模板如下：

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

4: 添加路由出口

<router-outlet></router-outlet>

5：添加路由连接

 <a routerLink="/heroes">Heroes</a>

解决错误记录
Error: “No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.”
解决方法：
在head标签下面加上<base …>

...