下载文档原格式
angular8获取当前路由的方法在Angular 8中，有多种方法可以获取当前路由。
下面是其中一些常用的方法。
1. 使用ActivatedRoute服务：ActivatedRoute服务是Angular提供的一个用于获取当前路由信息的服务。
可以在组件中注入ActivatedRoute服务，然后使用它的属性来获取当前路由的相关信息。
```typescriptconstructor(private route: ActivatedRoute) {}ngOnInithis.route.url.subscribe((segments) =>//获取当前路由的URL片段console.log(segments);});this.route.params.subscribe((params) =>//获取当前路由的参数console.log(params);});this.route.queryParams.subscribe((queryParams) =>//获取当前路由的查询参数console.log(queryParams);});```2. 使用Router服务：Router服务是Angular的核心路由服务，它提供了一些方法来获取当前路由的信息。
```typescriptconstructor(private router: Router) {}ngOnIniconst currentUrl = this.router.url;//获取当前路由的URLconst currentRoute = this.router.routerState.snapshot.url;//获取当前路由的URL（快照方式）const currentParams =this.router.routerState.snapshot.root.firstChild.params;//获取当前路由的参数（快照方式）const currentQueryParams =this.router.routerState.snapshot.root.firstChild.queryParams;//获取当前路由的查询参数（快照方式）```3. 使用Location服务：Location服务是Angular提供的一个用于与浏览器地址栏进行交互的服务。
angular路由传递参数方式Angular是一种流行的前端框架，它提供了一种方便的方式来构建单页应用程序。
在Angular中，路由是一个重要的概念，它允许我们在不同的视图之间进行导航。
而在路由导航过程中，有时候我们需要将参数传递给目标组件。
本文将介绍在Angular中如何使用路由传递参数的方式。
在Angular中，我们可以使用路由参数来传递数据给目标组件。
路由参数可以是任何类型的数据，例如字符串、数字、对象等。
下面是一些使用路由参数的常见场景：1. 传递字符串参数：当我们需要将一个字符串参数传递给目标组件时，可以使用路由参数来实现。
在定义路由时，我们可以在路由路径中使用冒号(:)来指定参数的名称。
例如，我们可以定义一个名为"product/:id"的路由路径，其中"id"就是我们要传递的参数。
然后，在导航到该路由时，我们可以通过ActivatedRoute服务来获取传递的参数值。
2. 传递数字参数：类似于传递字符串参数，我们也可以使用路由参数来传递数字参数。
只需将参数类型指定为number即可。
例如，我们可以定义一个名为"product/:id"的路由路径，其中"id"是一个数字参数。
然后，在目标组件中，我们可以使用ActivatedRoute服务来获取传递的数字参数。
3. 传递对象参数：有时候，我们需要将一个对象作为参数传递给目标组件。
在这种情况下，我们可以将对象转换为JSON字符串，并将其作为路由参数传递。
在目标组件中，我们可以使用ActivatedRoute服务来获取传递的JSON字符串，并将其转换回对象。
除了使用路由参数，我们还可以使用查询参数来传递数据给目标组件。
查询参数是以问号(?)开头的键值对，可以在路由路径之后添加。
例如，我们可以定义一个名为"product"的路由路径，然后在导航时添加查询参数，如"product?id=1"。
angular routermodule路由跳转的几种方式
Angular路由模块中，常见的跳转方式包括：
1. 通过 Link 组件跳转：Link 组件可以将用户导向到指定的路由，可以使用 routerLink 属性指定链接的目标。
2. 通过 router.navigate 方法跳转：可以直接使用
router.navigate 方法指定目标路由，或者传递路由参数。
3. 通过 router.navigateByUrl 方法跳转：与 router.navigate 方法类似，但它可以直接指定目标 URL，不需要提供路由参数。
4. 通过 router.navigateForward 方法跳转：与 router.navigate 方法类似，但它会在当前路由上添加新的路由历史，并向前跳转。
5. 通过 router.navigateBack 方法跳转：与 router.navigate 方法类似，但它会在当前路由上添加新的路由历史，并向后跳转。
6. 通过 router.navigateRoot 方法跳转：将用户导向到根路由。
7. 通过 router.replace 方法跳转：将当前路由替换为新的路由，不添加新的路由历史。
8. 通过 router.go 方法跳转：可以直接使用 router.go 方法跳转到指定的路由，不需要指定目标 URL。
详解AngularJS路由resolve⽤法ng-route模块中的when()和ui-route的state()都提供了resolve属性。
为什么需要使⽤resolve？当路由切换的时候，被路由的页⾯中的元素（标签）就会⽴马显⽰出来，同时，数据会被准备好并呈现出来。
但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，⽽后再呈现出数据。
这样就会导致页⾯会被渲染两遍，导致“页⾯UI抖动”的问题，对⽤户不太友好。
resolve的出现解决了这个问题。
resolve是⼲嘛⽤的resolve属性⾥的值会在路由成功前被预先设定好，然后注⼊到控制器中。
通俗地将，就是等数据都“就位”后，才进⾏路由（其实我觉得也不能叫路由，因为路由是⼀些列的操作，其中就包括了设置resolve属性等等）。
这样的好处就是页⾯仅会被渲染⼀遍。
<!--⾸页.html--><div ng-app="myApp"><div><a ui-sref = "index">前往list.html</a></div><div ui-view></div><!--这⾥是路由视图存放的地⽅--></div><!--list.html><div><h1>HI,这⾥是list.html</h1><a ui-sref="index.list">点击加载list.html视图</a><div ui-view></div><h1>{{user}}</h1><h2>{{name}}</h2><h3>{{age}}</h3><h3>{{email}}</h3></div>//JSvar app = angular.module('myApp',['ui.router']);app.config(["$stateProvider",function($stateProvider){$stateProvider.state("index",{url:'/',templateUrl:'list.html',controller:'myController',resolve:{user:function(){return {name:"perter",email:"826415551@",age:"18"}}}})}]);app.controller('myController',function($scope,user){$=;$scope.age=user.age;$scope.email=user.email;$er=user;});我在state⽅法⾥⾯设置了resolve属性，⾥⾯的值是⼀个名为user的对象，它存有⼏个值（格式好像JSON）。
angular清除路由参数摘要：1.什么是Angular 路由参数2.为什么需要清除路由参数3.如何使用Angular 内置方法清除路由参数4.总结正文：Angular 是一个流行的JavaScript 框架，它提供了许多功能，包括路由。
在Angular 中，路由参数用于在应用程序中导航到不同的页面。
有时候，你可能需要清除这些路由参数，以便在应用程序中实现不同的功能。
为什么需要清除路由参数呢？举个例子，假设你有一个应用程序，其中用户可以创建个人资料。
当用户第一次登录时，他们会被带到个人资料页面，该页面有一个路由参数，用于存储用户的ID。
如果用户想要更改他们的个人资料，他们需要导航到另一个页面，在该页面上，他们可以输入新的信息。
然而，如果用户在更改个人资料之前切换到另一个用户，那么就需要清除路由参数，以便正确地显示当前用户的资料。
那么，如何使用Angular 内置方法清除路由参数呢？有两种方法可以实现这一目标。
第一种方法是使用`NavigationExtras`对象。
这个对象允许你添加一些额外的导航信息，例如查询参数或操作。
要使用`NavigationExtras`清除路由参数，你可以创建一个新的`NavigationExtras`对象，并将其传递给`router.navigate()`方法。
例如：```this.router.navigate(["/"], {queryParams: {},replaceUrl: true});```这个代码片段将清除当前路由的所有查询参数，并将URL 替换为新的URL。
第二种方法是使用`router.resetUrl()`方法。
这个方法允许你重置当前路由的URL，但不包括导航信息。
例如：```this.router.resetUrl("/");```这个代码片段将清除当前路由的URL，并将其替换为新的URL。
总之，清除Angular 路由参数是确保应用程序正确运行的一种重要方法。
angular清除路由参数【原创版】目录1.什么是路由参数2.路由参数的作用3.如何清除路由参数4.清除路由参数的优点5.结论正文一、什么是路由参数路由参数是指在 URL 中用于表示某个具体路由的参数，通常是在URL 的查询字符串中表示。
例如，当我们访问一个详细页面时，URL 可能长这样：`/products/123`，这里的`123`就是一个路由参数，它代表了具体的产品 ID。
二、路由参数的作用路由参数的主要作用是用于在服务器端识别和解析具体的请求，以便将请求映射到相应的数据和视图。
在单页面应用（SPA）中，路由参数可以用于动态加载和更新页面内容，提高用户体验。
三、如何清除路由参数在 Angular 框架中，要清除路由参数，可以使用`location.replaceState()`方法。
该方法接受三个参数：当前路由参数的键、要替换的值和新的 URL。
例如，假设我们有一个路由参数`productId`，我们想要将其清除，可以这样操作：```javascript$state.replaceState("productId", null, "/products");```四、清除路由参数的优点清除路由参数的主要优点是可以提高网站的 SEO 性能。
因为搜索引擎爬虫在抓取网页时，通常会忽略 URL 中的查询字符串，所以清除路由参数可以使网页的 URL 更加简洁，有利于搜索引擎的抓取和索引。
五、结论综上所述，作为 Angular 开发者，我们有多种方法可以清除路由参数，这对于提高网站的 SEO 性能是非常有益的。
angular用法Angular是一个用于构建Web应用程序的开源框架。
它使用TypeScript编程语言并采用模块化的方式进行开发。
Angular的用法如下：1.安装：首先，需要通过npm安装Angular CLI（命令行界面），这是一个用于创建和管理Angular项目的工具。
2.创建项目：使用Angular CLI创建一个新的项目。
在命令行中运行`ng new my-app`，其中“my-app”是项目的名称。
这将在当前目录下创建一个新的Angular项目。
3.开发组件：Angular的核心概念之一是组件，它是应用程序的基本构建块。
通过在命令行中运行`ng generate component my-component`，可以生成一个名为“my-component”的新组件。
4.编写逻辑：在生成的组件文件中，可以使用TypeScript编写该组件的逻辑。
可以在组件类中定义属性、方法和生命周期钩子函数等。
5.定义模板：在组件文件中，也可以定义一个HTML模板。
模板用于定义组件的外观和布局，可以包含插值、指令、事件绑定等。
6.样式化：可以为组件添加CSS样式，以定义其外观和样式。
可以使用内联样式或外部样式表。
7.数据绑定：Angular支持双向数据绑定，可以在模板中绑定组件的属性，并实现数据的自动更新。
8.路由：Angular提供了路由模块，用于管理应用程序的页面导航。
可以定义路由配置，并在组件中导航到不同的页面。
9.服务：Angular中的服务是用于共享数据和逻辑的可注入对象。
可以创建自定义服务，并在组件中使用依赖注入进行访问。
10.编译和构建：使用Angular CLI可以对应用程序进行编译和构建，生成用于部署的静态文件。
除了以上基本用法，Angular还提供了很多其他功能，如表单处理、HTTP请求、响应式编程等。
它还有一个强大的生态系统，包括各种插件和库，可以扩展其功能和性能。
同时，Angular还支持移动端开发，并具有良好的兼容性和性能优化。
angular8获取当前路由的方法Angular是一种流行的前端框架，用于构建单页面应用程序。
在Angular中，我们可以使用Router模块来处理应用程序中的路由。
获取当前路由的方法有多种方式，下面我将详细介绍这些方法。
1. ActivatedRoute服务Angular的Router模块提供了一个名为ActivatedRoute的服务，用于获取当前路由的信息。
我们可以在组件中注入ActivatedRoute服务，并使用它的属性来获取当前路由的各种信息。
以下是一些常用的属性：- paramMap：包含路由参数的可观察对象，可以通过subscribe 方法获取参数的值。
- queryParamMap：包含查询参数的可观察对象，可以通过subscribe方法获取查询参数的值。
- snapshot：包含当前路由的快照信息，包括路由路径、参数和查询参数。
下面是一个获取当前路由参数和查询参数的例子：```typescriptimport { ActivatedRoute } from '@angular/router'; export class MyComponent {constructor(private route: ActivatedRoute) { this.route.paramMap.subscribe(params => {const id = params.get('id');console.log(id); //输出当前路由的id参数值});this.route.queryParamMap.subscribe(params => { const page = params.get('page');console.log(page); //输出当前路由的page查询参数值});}}```2. Router服务除了使用ActivatedRoute服务来获取当前路由信息，我们还可以使用Router服务来获取当前路由的一些信息。
详解关于Angular4ng-zorro使⽤过程中遇到的问题写在前⾯由于现在⽹络上Angular 4的相关技术⽂档不是很充分，我写出这个采坑的记录⽂档，⼀⽅⾯是想给⾃⼰在项⽬中遇到的各种问题与个⼈的理解记录下来，另⼀⽅⾯也想着某些坑⼤家可能也会遇到，也可以给道友做⼀个参考。
⽂档中的很多地⽅多有不⾜，后期我会慢慢完善，也希望道友们能够及时指出⽂档中不正确的与可以优化的地⽅。
我计划将该帮助⽂档分为4个章节:章节⼀：关于angular 4 + ng-zorro在基础布局与模块拆分上的⼀些问题与操作步骤章节⼆：angular 4 引⼊路由=> 组件模块化#module模块化=> 路由模块化（路由按需加载）章节三：引⼊拦截器，统⼀管理请求与相应=>引⼊http服务进⾏通讯=>引⼊service服务与后台进⾏通讯=>拆分service服务=> 应⽤观察者模式对数据进⾏发布与订阅章节四：项⽬打包=>优化============================= Begin ===============================章节⼀：关于angular 4 + ng-zorro在基础布局与模块拆分上的⼀些问题与操作步骤在使⽤阿⾥爸爸推出的Ng-zorro前，希望你先确保本地的angular-cli版本是最新的版本，⽬前最新的版本为1.6.3（2018/1/10） *兼容问题可能会导致后期项⽬打包后部门js丢失如果你本地已经全局安装了cli或者已经使⽤相对较旧的版本创建了angular 的项⽬，那么你可以按照下⾯的命令去更新你本地与项⽬中的cli版本去兼容ng-zorro：⾸先需要先卸载本地的angular-cli安装包：npm uninstall -g angular-clinpm uninstall --save-dev angular-cli在全局安装最新版本的cli包：npm uninstall -g @angular/clinpm cache cleannpm install -g @angular/cli@latest你可以通过cmd命令⾏，使⽤ ng -v 去看到本地⽬前cli的版本。
angular页面跳转原理
Angular页面跳转是指在Angular应用程序中从一个页面切换到另一个页面的行为。
Angular使用路由来实现页面跳转。
路由是Angular应用程序中用于定义页面路径和组件的映射的机制。
Angular页面跳转的基本原理如下：
1.用户点击或触摸浏览器中的链接或按钮。
2.Angular路由器解析链接或按钮的URL。
3.Angular路由器找到与URL匹配的路由配置。
4.Angular路由器使用路由配置中的组件来渲染新的页面。
Angular路由器可以使用两种模式来实现页面跳转：
●Hash模式：Hash模式使用URL的hash部分来表示页面路径。
Hash模式的优
点是可以使用浏览器的“后退”和“前进”按钮来导航到之前的页面。
Hash模式的缺点是URL中会出现hash字符串，这可能会影响SEO。
●History模式：History模式使用浏览器的历史记录来表示页面路径。
History
模式的优点是URL中不会出现hash字符串，这有利于SEO。
History模式的缺点是不能使用浏览器的“后退”和“前进”按钮来导航到之前的页面。
Angular页面跳转可以通过以下方式来实现：
1.使用路由指令：路由指令可以用于在HTML中定义路由。
2.使用路由服务：路由服务可以用于在代码中访问和操作路由。
路由一、路由的基本概念和简单应用1.再谈SPA在介绍路由之前，让我们先明确一个概念，叫SPA（Single Page Application），一个单页应用是主页面只加载一次，不再刷新，只是改变页面上部分内容的应用。
Angular应用就是SPA，Angular中使用路由器来实现根据用户的操作来改变页面的内容，而不重新加载页面，现在这个阶段你可以把路由理解为控制整个页面视图状态的一个对象，每个应用都会有一个路由器，你需要配置这个路由器，使其满足你的需求，路由器的另一个作用是为每一个视图状态分配一个唯一的URL，这样你就可以利用URL使应用跳转到你需要的某个视图状态，你可以把一个SPA理解为是一组视图状态的集合。
路由是导航的另一个名字。
路由器就是从一个视图导航到另一个视图的机制。
2.下面是一些和路由相关的关键词汇及其含义。
路由器部件含义Router（路由器）为激活的URL显示应用组件。
管理从一个组件到另一个组件的导航RouterModule（路由器模块）一个独立的Angular模块，用于提供所需的服务提供商，以及用来在应用视图之间进行导航的指令。
Routes（路由数组）定义了一个路由数组，每一个都会把一个URL路径映射到一个组件。
Route（路由）定义路由器该如何根据URL模式（pattern）来导航到组件。
大多数路由都由路径和组件类构成。
RouterOutlet（路由出该指令（<router-outlet>）用来标记出路由器该在哪口）里显示视图。
RouterLink（路由链接）该指令用来把一个可点击的HTML元素绑定到路由。
点击带有绑定到字符串或链接参数数组的routerLink指令的元素就会触发一次导航。
RouterLinkActive（活动路由链接）当HTML元素上或元素内的routerLink变为激活或非激活状态时，该指令为这个HTML元素添加或移除CSS类。
ActivatedRoute（激活的路由）为每个路由组件提供提供的一个服务，它包含特定于路由的信息，比如路由参数、静态数据、解析数据、全局查询参数和全局碎片（fragment）。
RouterState（路由器状态）路由器的当前状态包含了一棵由程序中激活的路由构成的树。
它包含一些用于遍历路由树的快捷方法。
链接参数数组这个数组会被路由器解释成一个路由操作指南。
我们可以把一个RouterLink绑定到该数组，或者把它作为参数传给Router.navigate方法。
路由组件一个带有RouterOutlet的Angular组件，它根据路由器的导航来显示相应的视图。
3.我们来新建一个项目，是学习Angular路由的使用4.我们用WebStorm打开刚才新建的项目，当我们使用—routing参数创建项目的时候，他会在app文件夹下生成一个app-routing.module.ts文件。
使用--routing参数创建Angular项目时，他会给我们生成当前路由的配置，和一个AppRoutingModule这样一个模块，然后在应用的主模块里面在imports下面会有一个声明，他引入AppRoutingModule，也就是说在AppRoutingModule中写的路由配置都会通过这个imports导到我这个app的主模块里面去，那么我这个App应用就会知道如何根据Routing这个模块的配置来进行组件的一个路由。
5.路由功能的演示：好，为了演示路由的功能，我们来生成两个组件DashboardComponent和HeroesComponent，在点击超链接时导航到相应的组件视图。
6.配置路由，让DashboardComponent成为默认显示的组件修改WebStorm配置，禁用TypeScript语法检查。
完整的路由配置如下。
上面的Routes就是路由配置对象，他实际上就是一组路由配置的集合，每条路由配置都至少有两个属性，一个是path，就是你的浏览器的URL的路径，另一个就是当浏览器访问这个路径的时候，你所要展示的一个组件。
我们来看一下AppComponent这个组件，在他的模板上，当我们用routing参数生成项目的时候自动帮我们生成了一个<router-outlet>，他就是一个定位器，告诉咱们的路由展示在什么地方，路由展示在这个定位器的下面。
7.在ponent.html组件视图模板中添加路由器链接。
现在，我们已经有了配置好的一些路由，还找到了渲染它们的地方，但又该如何导航到它呢？固然，从浏览器的地址栏直接输入URL也能做到，但是大多数情况下，导航是某些用户操作的结果，比如点击一个A标签。
如上图所示，首页的路由链接为”/”，也就是我们在路由配置中的path:’’。
启动应用，查看效果。
8.接下来我们在ponent.html中添加一个按钮，点击该按钮，让应用导航到英雄组件视图。
启动我们的应用，运行正常。
9.当我们在浏览器中输入一个不存在的路由，在页面上不会有变化，但是在调试界面会发现报错了，这是因为Angular解析不了。
我们可以使用通配符来解决这个问题，首先我们来创建一个新的组件code404，当访问不存在的URL地址时，可以导航到这个组件上去。
修改路由配置，使用**通配符，匹配所有的路径。
注意要把通配符配置写在最后（按照从上到下的匹配原则，找到匹配的即开始执行路由）再次启动应用查看运行效果，输入一个不存在的异常，已经可以正常解析。
二、在路由时传递数据的三种方式:1.第一种:在查询参数中传递数据/heroes?id=1&name=z =>ActivatedRoute.queryParams[id]queryParams指令用于传递查询参数。
其中queryParams必须使用[]括起来，否则无法正确传递参数。
routerLink指令也可以用[]括起来，使用[]时，后面必须匹配数组的模式。
snapshot叫做参数快照。
2.第二种方式，在路由路径中传递数据，在定义路由的路径时就要指定参数的名字，然后在实际的路径中携带这个参数，在路由的目标组件中你可以用ActivatedRoute.params[id]获取：{path:/heroes/:id}=> /heroes/1 => ActivatedRoute.params[id] 来获取到相应的id3.第三种方式在路由配置中传递数据，用来传递一些静态数据：{path:/heroes,component:HeroesComponent，data:[{isHero:true}]} =>ActivatedRoute.data[0][isHero] ，以上我们就演示了在Angular的路由中进行参数传递的几种方式。
在这里还有一个细节问题，就是当在一个组件视图中，使用不同方式导航到同一个组件视图时，会出现参数获取不正常的情况，这时我们需要使用参数订阅才能解决。
4.接下来演示参数快照和参数订阅，我们先恢复代码到使用查询参数传递数据的方式：修改按钮的处理方法，传递查询参数启动应用，查看效果：我们发现一个问题，当我们从DashboardComponent组件通过超链接或是按钮进入HeroesComponent组件时，参数传递都没有问题，但是，当我们位于HeroesComponent 组件，再次通过超链接或是按钮进入该组件时，会发现地址栏中已经传递了参数，但是在界面中没有任何变化，这本身就是有问题的，之所以产生这样的问题，是因为当我们从DashboardComponent组件跳转到HeroesComponent组件时，每次都会创建HeroesComponent这个组件，会执行ngOnInit方法，但是从同一个组件跳转到自身时，因为组件没有被重新创建，快照方法不会被执行，无法获取参数。
如何解决这个问题呢就是使用参数订阅，参数订阅和快照的不同是每当路由中的参数发生变化的时候，其内部的匿名方法都会被调用一次。
刷新应用，查看效果正常。
这样这个问题就解决了。
这是路由使用需要注意的一个点，就是当你确定你的路由永远不会从自身路由到自身的时候，你就可以用snapshot，他比较节省资源，从快照中获取，速度比较快，当你不能确定是否存在这种情况时，你就应该使用参数订阅这种方式获取参数。
5.重定向路由：重定向路由在用户访问一个特定的地址时，将其重定向到另一个指定的地址。
我们来看一下我们目前的路由配置{ path: '',component:DashboardComponent }，DashBoardComponent这个组件，他对应的路径是一个空字符串，但实际上这样是一个不太好的习惯，更好的习惯是路由的路径和组件保持一致，如：{ path: 'dashboard',component:DashboardComponent }重新启动应用，运行效果如下点击链接也无法跳转，因为localhost:4200的路径是空字符串，是无法匹配到现有的路由的，只能被**捕获，输出页面不存在，但是在路径中输入dashboard，页面可以实现跳转。
现在我们把页面的链接改一下：启动应用，依然显示页面不存在，但是点击超链接时已经可以实现页面跳转。
但是我希望的是当我访问localhost：4200时直接显示Dashboard组件视图，要实现这样一个概念，我们使用到的技术就是路由重定向。
现在我们在路由配置中添加一个重定向路由。
使用redirectTo指定一个重定向的目的路径，pathMatch路径匹配模式为full，这样只有当精准的路由是空字符串的时候，才跳转到DashboardComponent。
除以上介绍的关于路由的基础知识之外，路由包含的内容还很广泛，像如何定义子路由，如何实现辅助路由，以及路由守卫等，关于路由的知识我们就介绍到这里，感兴趣的同学可以从官方文档中继续学习，接下来我们开始本章的实战内容。
三、英雄指南实战我们收到了《英雄指南》的一些新需求：添加一个仪表盘视图。
在英雄列表和仪表盘视图之间导航。
无论在哪个视图中点击一个英雄，都会导航到该英雄的详情页。
完成时，用户就能像这样在应用中导航：这已经是一个较为完善的单页应用了，我们可以看出要实现如图所示的功能，我们首先需要识别，设计出有几个组件，他们之间有什么样的关系，如何进行通讯，以及如何进行路由导航。
接下来我们改造现有的项目，将原来写在AppComponent组件中的英雄展示的逻辑独立到HeroesComponent组件中，添加一个仪表盘组件显示英雄榜，改造英雄详情组件，使其可以接收并显示英雄的详情信息，使AppComponent组件变成应用程序的“壳”，使他只负责导航。
1.创建DashboardComponent、HeroesComponent组件和路由模块。
