[北京|结业弟子]JS-肖明明|2019年08月22日的日报-技能树.IT修真院

发表于： 2019-08-22 21:57:49

0 754

今天完成的事：

1，学习了angular的路由

在 Angular 中，最好在一个独立的顶级模块中加载和配置路由器，
它专注于路由功能，然后由根模块 AppModule 导入它。
按照惯例，这个模块类的名字叫做 AppRoutingModule，
并且位于 src/app 下的 app-routing.module.ts 文件中。使用 CLI 生成它。
ng generate module app-routing --flat --module=app
--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。
你通常不会在路由模块中声明组件，
所以可以删除 @NgModule.declarations 并删除对 CommonModule 的引用。
你通常不会在路由模块中声明组件，所以可以删除 @NgModule.declarations 并删除对 CommonModule 的引用。
你将会使用 RouterModule 中的 Routes 类来配置路由器，所以还要从 @angular/router 库中导入这两个符号。
添加一个 @NgModule.exports 数组，其中放上 RouterModule 。 
导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。

添加路由定义
路由定义 会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。
典型的 Angular 路由（Route）有两个属性：
path：一个用于匹配浏览器地址栏中 URL 的字符串。
component：当导航到此路由时，路由器应该创建哪个组件。
如果你希望当 URL 为 localhost:4200/heroes 时，就导航到 HeroesComponent。
首先要导入 HeroesComponent，以便能在 Route 中引用它。 然后定义一个路由数组，其中的某个路由是指向这个组件的。
你必须首先初始化路由器，并让它开始监听浏览器中的地址变化。
   把 RouterModule 添加到 @NgModule.imports 数组中，并用 routes 来配置它。
   你只要调用 imports 数组中的 RouterModule.forRoot() 函数就行了。
/**
 * 以前，父组件 HeroesComponent 会设置 HeroDetailComponent.hero 属性，然后 HeroDetailComponent 就会显示这个英雄。
HeroesComponent 已经不会再那么做了。 现在，当路由器会在响应形如 ~/detail/11 的 URL 时创建 HeroDetailComponent。
HeroDetailComponent 需要从一种新的途径获取要显示的英雄。
获取创建本组件的路由，从这个路由中提取出 id
通过 HeroService 从服务器上获取具有这个 id 的英雄数据。
 */
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import { Location } from "@angular/common";

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

@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent implements OnInit {
/**
 * 
 * ActivatedRoute 保存着到这个 HeroDetailComponent 实例的路由信息。 
 * 这个组件对从 URL 中提取的路由参数感兴趣。 其中的 id 参数就是要显示的英雄的 id。
   HeroService 从远端服务器获取英雄数据，本组件将使用它来获取要显示的英雄。
   location 是一个 Angular 的服务，用来与浏览器打交道。 稍后，你就会使用它来导航回上一个视图。
 */
constructor(
private heroService: HeroService,
private route:ActivatedRoute,
private location:Location
) { }
//在 ngOnInit() 生命周期钩子 中调用 getHero()，代码如下：
ngOnInit():void {
this.getHero();
}
hero:Hero;
/**
   * route.snapshot 是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后。
paramMap 是一个从 URL 中提取的路由参数值的字典。 "id" 对应的值就是要获取的英雄的 id。
路由参数总会是字符串。 JavaScript 的 (+) 操作符会把字符串转换成数字，英雄的 id 就是数字类型。
刷新浏览器，应用挂了。出现一个编译错误，因为 HeroService 没有一个名叫 getHero() 的方法。 这就添加它。
   */
getHero():void{
const id = +this.route.snapshot.paramMap.get('id');
this.heroService.getHero(id)
.subscribe(hero=>this.hero = hero);
}
goBack():void{
this.location.back();
}
}