发表于: 2021-03-08 23:58:00
1 943
今天完成的事情:
学习angular添加应用导航
添加根路由AppRoutingModule
终端输入ng generate module app-routing --flat --module=app,创建app-routing.module.ts 文件
--flat 把这个文件放进了 src/app 中,而不是单独的目录中
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中
路由
配置路由
path: 用来匹配浏览器地址栏中 URL 的字符串
component: 导航到该路由时,路由器应该创建的组件
RouterModule.forRoot()
RouterModule 添加指令和提供者,以便在应用程序中定义的视图之间进行应用内导航
forRoot() 方法会提供路由所需的服务提供者和指令,还会基于浏览器的当前 URL 执行首次导航
添加路由出口 RouterOutlet
在app.component.html文件把 <app-heroes> 元素替换为 <router-outlet>
添加路由链接
在app.component.html文件添加
添加仪表盘视图
ng generate component dashboard创建仪表视图文件
在app-routing.module.ts中
添加仪表盘路由
DashboardComponent 导入到 AppRoutingModule 中
ashboardComponent 的路由添加到 AppRoutingModule.routes 数组中
添加默认路由
把仪表盘链接添加主视图
把app.component.html文件改为
导航到英雄详情
添加英雄详情视图
在app-routing.module.ts中添加HeroDetailComponent
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
添加添加仪表盘路由视图:dashboard.component.html
支持路由的 HeroDetailComponent:
在hero-detail.component.ts中
获取创建本组件的路由
从这个路由中提取出 id
通过 HeroService 从服务器上获取具有这个 id 的英雄数据
import { HeroService } from '../hero.service';
问题:
关于导入路由的特性文件HeroDetailComponent部分不太明白,添加的ActivatedRoute和Location是什么原理
评论