[成都|内门弟子]CSS-何俊|2021年03月08日的日报-技能树.IT修真院

发表于： 2021-03-08 23:58:00

1 940

今天完成的事情：

学习angular添加应用导航

添加根路由AppRoutingModule

终端输入ng generate module app-routing --flat --module=app，创建app-routing.module.ts 文件

--flat 把这个文件放进了 src/app 中，而不是单独的目录中

--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中

路由

配置路由

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

path: 用来匹配浏览器地址栏中 URL 的字符串

component: 导航到该路由时，路由器应该创建的组件

RouterModule.forRoot()

RouterModule 添加指令和提供者，以便在应用程序中定义的视图之间进行应用内导航

forRoot() 方法会提供路由所需的服务提供者和指令，还会基于浏览器的当前 URL 执行首次导航

imports: [ RouterModule.forRoot(routes) ],

exports: [ RouterModule ]

添加路由出口 RouterOutlet

在app.component.html文件把 <app-heroes> 元素替换为 <router-outlet>

添加路由链接

在app.component.html文件添加

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

添加仪表盘视图

ng generate component dashboard创建仪表视图文件

在app-routing.module.ts中

添加仪表盘路由

DashboardComponent 导入到 AppRoutingModule 中

import { DashboardComponent } from './dashboard/dashboard.component';

ashboardComponent 的路由添加到 AppRoutingModule.routes 数组中

{ path: 'dashboard', component: DashboardComponent },

添加默认路由

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

把仪表盘链接添加主视图

把app.component.html文件改为

<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
</nav>

导航到英雄详情

添加英雄详情视图

在app-routing.module.ts中添加HeroDetailComponent

import { HeroDetailComponent } from './hero-detail/hero-detail.component';

{ path: 'detail/:id', component: HeroDetailComponent },

添加添加仪表盘路由视图：dashboard.component.html

<a *ngFor="let hero of heroes" class="col-1-4"
    routerLink="/detail/{{hero.id}}">
  <div class="module hero">
    <h4>{{hero.name}}</h4>
  </div>
</a>

支持路由的 HeroDetailComponent:

在hero-detail.component.ts中

获取创建本组件的路由

从这个路由中提取出 id

通过 HeroService 从服务器上获取具有这个 id 的英雄数据

import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { HeroService } from '../hero.service';

constructor(
  private route: ActivatedRoute,
  private heroService: HeroService,
  private location: Location
) {}

问题：

关于导入路由的特性文件HeroDetailComponent部分不太明白，添加的ActivatedRoute和Location是什么原理

返回列表

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年03月08日 的日报 中品

评论

分享到

【任务10】 [成都|内门弟子]CSS-何俊 | 2021年03月08日的日报中品