2019-12-02 12:47:19 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								# Routing and navigation
  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-30 00:03:22 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								# 路由与导航
  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The Angular ** `Router` ** enables navigation from one [view ](guide/glossary#view ) to the next
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								as users perform application tasks.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								在用户使用应用程序时, 视图 ](guide/glossary#view )导航到另一个视图。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This guide covers the router's primary features, illustrating them through the evolution
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								of a small application that you can < live-example > run live in the browser< / live-example > .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本章涵盖了该路由器的主要特性,通过一个小型应用的成长演进来讲解它。参见< live-example > < / live-example > 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								<!--  style for all tables on this page  -->  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< style >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  td, th {vertical-align: top}
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / style >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## Overview
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## 概览
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The browser is a familiar model of application navigation:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								浏览器具有熟悉的导航模式:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Enter a URL in the address bar and the browser navigates to a corresponding page. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								   在地址栏输入 URL, 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Click links on the page and the browser navigates to a new page. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   在页面中点击链接,浏览器就会导航到一个新页面。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Click the browser's back and forward buttons and the browser navigates 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  backward and forward through the history of pages you've seen.
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								   点击浏览器的前进和后退按钮,浏览器就会在你的浏览历史中向前或向后导航。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The Angular `Router`  ("the router") borrows from this model.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It can interpret a browser URL as an instruction to navigate to a client-generated view.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It can pass optional parameters along to the supporting view component that help it decide what specific content to present.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can bind the router to links on a page and it will navigate to
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the appropriate application view when the user clicks a link.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can navigate imperatively when the user clicks a button, selects from a drop box,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								or in response to some other stimulus from any source. And the router logs activity
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								in the browser's history journal so the back and forward buttons work as well.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Angular 的 `Router` (即“路由器”)借鉴了这个模型。它把浏览器中的 URL 看做一个操作指南,
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  据此导航到一个由客户端生成的视图,并可以把参数传给支撑视图的相应组件,帮它决定具体该展现哪些内容。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  你可以为页面中的链接绑定一个路由,这样,当用户点击链接时,就会导航到应用中相应的视图。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  当用户点击按钮、从下拉框中选取,或响应来自任何地方的事件时,你也可以在代码控制下进行导航。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  路由器还在浏览器的历史日志中记录下这些活动,这样浏览器的前进和后退按钮也能照常工作。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  basics}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## The Basics
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## 基础知识
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This guide proceeds in phases, marked by milestones, starting from a simple two-pager
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and building toward a modular, multi-view design with child routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 13:41:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本章包括一系列里程碑,从一个单模块、两个页面的简单程序逐步走向带有多个子路由的多视图设计。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								An introduction to a few core router concepts will help orient you to the details that follow.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								先对路由的一些核心概念做一个介绍,它能帮你逐步过渡到细节。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  basics-base-href}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### *<base href>*
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-04 14:06:15 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### *<base href>* 元素
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Most routing applications should add a `<base>`  element to the `index.html`  as the first child in the  `<head>`  tag
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to tell the router how to compose navigation URLs.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								大多数带路由的应用都要在**`index.html` **的 `<head>`  标签下先添加一个 `<base>`  元素,来告诉路由器该如何合成导航用的 URL。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If the `app`  folder is the application root, as it is for the sample application,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								set the `href`  value *exactly*  as shown here.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果 `app`  文件夹是该应用的根目录(就像范例应用中一样),那就把 `href`  的值设置为下面这样:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/index.html"  header = "src/index.html (base-href)"  region = "base-href" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  basics-router-imports}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Router imports
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 从路由库中导入
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The Angular Router is an optional service that presents a particular component view for a given URL.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It is not part of the Angular core. It is in its own library package, `@angular/router` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Import what you need from it as you would from any other Angular package.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Angular 的路由器是一个可选的服务,它用来呈现指定的 URL 所对应的视图。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它并不是 Angular 核心库的一部分,而是在它自己的 `@angular/router`  包中。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								像其它 Angular 包一样,你可以从它导入所需的一切。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.1.ts"  header = "src/app/app.module.ts (import)"  region = "import-router" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You'll learn about more options in the [details below ](#browser-url-styles ).
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你将会在[后面 ](guide/router#browser-url-styles )学到更多选项。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  basics-config}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Configuration
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 配置
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								A routed Angular application has one singleton instance of the *`Router`*  service.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When the browser's URL changes, that router looks for a corresponding `Route` 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								from which it can determine the component to display.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								每个带路由的 Angular 应用都有一个*`Router` (路由器)*服务的单例对象。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								当浏览器的 URL 变化时,路由器会查找对应的 `Route` (路由),并据此决定该显示哪个组件。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								A router has no routes until you configure it.
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The following example creates five route definitions, configures the router via the `RouterModule.forRoot()`  method,
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and adds the result to the `AppModule` 's `imports`  array.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器需要先配置才会有路由信息。
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								下面的例子创建了五个路由定义,并用 `RouterModule.forRoot()`  方法来配置路由器,
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								并把它的返回值添加到 `AppModule`  的 `imports`  数组中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.0.ts"  header = "src/app/app.module.ts (excerpt)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  example-config}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `appRoutes`  array of *routes*  describes how to navigate.
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Pass it to the `RouterModule.forRoot()`  method in the module `imports`  to configure the router.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这里的路由数组 `appRoutes`  描述如何进行导航。
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把它传给 `RouterModule.forRoot()`  方法并传给本模块的 `imports`  数组就可以配置路由器。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Each `Route`  maps a URL `path`  to a component.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								There are _no leading slashes_  in the _path_ .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router parses and builds the final URL for you,
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								allowing you to use both relative and absolute paths when navigating between application views.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								每个 `Route`  都会把一个 URL 的 `path`  映射到一个组件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								注意,`path`  不能以*斜杠(`/` ) 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								路由器会为解析和构建最终的 URL, , 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-19 11:30:02 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `:id`  in the second route is a token for a route parameter. In a URL such as `/hero/42` , "42"
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								is the value of the `id`  parameter. The corresponding `HeroDetailComponent` 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								will use that value to find and present the hero whose `id`  is 42.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You'll learn more about route parameters later in this guide.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								第二个路由中的 `:id`  是一个路由参数的令牌(Token)。比如 `/hero/42`  这个 URL 中, `id`  参数的值。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								此 URL 对应的 `HeroDetailComponent`  组件将据此查找和展现 `id`  为 42 的英雄。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在本章中稍后的部分,你将会学习关于路由参数的更多知识。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `data`  property in the third route is a place to store arbitrary data associated with
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								this specific route. The data property is accessible within each activated route. Use it to store
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								items such as page titles, breadcrumb text, and other read-only, _static_  data.
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You'll use the [resolve guard ](#resolve-guard ) to retrieve _dynamic_  data later in the guide.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								第三个路由中的 `data`  属性用来存放于每个具体路由有关的任意信息。该数据可以被任何一个激活路由访问,并能用来保存诸如
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								页标题、面包屑以及其它静态只读数据。本章稍后的部分,你将使用[resolve 守卫 ](guide/router#resolve-guard )来获取动态数据。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-08 16:36:05 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The **empty path**  in the fourth route represents the default path for the application,
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the place to go when the path in the URL is empty, as it typically is at the start.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This default route redirects to the route for the `/heroes`  URL and, therefore, will display the `HeroesListComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								第四个路由中的空路径(`''` )表示应用的默认路径,当 URL 为空时就会访问那里,因此它通常会作为起点。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这个默认路由会重定向到 URL `/heroes` ,并显示 `HeroesListComponent` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `**`  path in the last route is a **wildcard** . The router will select this route
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								if the requested URL doesn't match any paths for routes defined earlier in the configuration.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This is useful for displaying a "404 - Not Found" page or redirecting to another route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								最后一个路由中的 `**`  路径是一个**通配符**。当所请求的 URL 不匹配前面定义的路由表中的任何路径时,路由器就会选择此路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								这个特性可用于显示“404 - Not Found”页, 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								**The order of the routes in the configuration matters** and this is by design. The router uses a **first-match wins** 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								strategy when matching routes, so more specific routes should be placed above less specific routes.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In the configuration above, routes with a static path are listed first, followed by an empty path route,
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								that matches the default route.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The wildcard route comes last because it matches _every URL_  and should be selected _only_  if no other routes are matched first.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**这些路由的定义顺序**是刻意如此设计的。路由器使用**先匹配者优先**的策略来匹配路由,所以,具体路由应该放在通用路由的前面。在上面的配置中,带静态路径的路由被放在了前面,后面是空路径路由,因此它会作为默认路由。而通配符路由被放在最后面,这是因为它能匹配上*每一个 URL*,因此应该**只有在**前面找不到其它能匹配的路由时才匹配它。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								If you need to see what events are happening during the navigation lifecycle, there is the **enableTracing**  option as part of the router's default configuration. This outputs each router event that took place during each navigation lifecycle to the browser console. This should only be used for _debugging_  purposes. You set the `enableTracing: true`  option in the object passed as the second argument to the `RouterModule.forRoot()`  method.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果你想要看到在导航的生命周期中发生过哪些事件,可以使用路由器默认配置中的 **enableTracing**  选项。它会把每个导航生命周期中的事件输出到浏览器的控制台。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这应该只用于*调试*。你只需要把 `enableTracing: true`  选项作为第二个参数传给 `RouterModule.forRoot()`  方法就可以了。
							 
						 
					
						
							
								
									
										
										
										
											2017-08-06 13:21:34 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  basics-router-outlet}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Router outlet
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 路由出口
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `RouterOutlet`  is a directive from the router library that is used like a component.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It acts as a placeholder that marks the spot in the template where the router should
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								display the components for that outlet.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`RouterOutlet`  是一个来自路由模块中的指令,它的用法类似于组件。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它扮演一个占位符的角色,用于在模板中标出一个位置,路由器将会把要显示在这个出口处的组件显示在这里。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "html" >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < router-outlet>< /router-outlet>
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < !-- Routed components go here -->
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Given the configuration above, when the browser URL for this application becomes `/heroes` ,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the router matches that URL to the route path `/heroes`  and displays the `HeroListComponent` 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								as a sibling element to the `RouterOutlet`  that you've placed in the host component's template.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								有了这份配置,当本应用在浏览器中的 URL 变为 `/heroes`  时,路由器就会匹配到 `path`  为 `heroes`  的 `Route` ,并在宿主视图中的*`RouterOutlet` *之后显示 `HeroListComponent`  组件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  basics-router-links}
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  router-link}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Router links
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 路由器链接
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Now you have routes configured and a place to render them, but
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								how do you navigate? The URL could arrive directly from the browser address bar.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But most of the time you navigate as a result of some user action such as the click of
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								an anchor tag.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现在,你已经有了配置好的一些路由,还找到了渲染它们的地方,但又该如何导航到它呢?固然,从浏览器的地址栏直接输入 URL 也能做到,但是大多数情况下,导航是某些用户操作的结果,比如点击一个 A 标签。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Consider the following template:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								考虑下列模板:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.1.html"  header = "src/app/app.component.html" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `RouterLink`  directives on the anchor tags give the router control over those elements.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The navigation paths are fixed, so you can assign a string to the `routerLink`  (a "one-time" binding).
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`a`  标签上的 `RouterLink`  指令让路由器得以控制这个 `a`  元素。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这里的导航路径是固定的,因此可以把一个字符串赋给 `routerLink` (“一次性”绑定)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Had the navigation path been more dynamic, you could have bound to a template expression that
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								returned an array of route link parameters (the _link parameters array_ ).
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router resolves that array into a complete URL.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果需要更加动态的导航路径,那就把它绑定到一个返回*链接参数数组*的模板表达式。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器会把这个数组解析成完整的 URL。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  router-link-active}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Active router links
  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 路由链接的激活状态
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `RouterLinkActive`  directive toggles css classes for active `RouterLink`  bindings based on the current `RouterState` .
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`RouterLinkActive`  指令会基于当前的 `RouterState`  为活动的 `RouterLink`  切换所绑定的 css 类。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								On each anchor tag, you see a [property binding ](guide/template-syntax#property-binding ) to the `RouterLinkActive`  directive that look like `routerLinkActive="..."` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在每个 A 标签上,你会看到一个到 `RouterLinkActive`  的[属性绑定 ](guide/template-syntax#property-binding ),形如 `routerLinkActive="..."` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The template expression to the right of the equals (=) contains a space-delimited string of CSS classes
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								that the Router will add when this link is active (and remove when the link is inactive). You set the `RouterLinkActive` 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								directive to a string of classes such as `[routerLinkActive]="'active fluffy'"`  or bind it to a component
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								property that returns such a string.
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								等号右边的模板表达式包含一些用空格分隔的 CSS 类名,当这个链接激活时,路由器将会把它们加上去(并在处于非活动状态时移除)。你还可以把 `RouterLinkActive`  设置为一个类组成的字符串,如 `[routerLinkActive]="'active fluffy'"` ,或把它绑定到一个返回类似字符串的组件属性。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Active route links cascade down through each level of the route tree, so parent and child router links can be active at the same time. To override this behavior, you can bind to the `[routerLinkActiveOptions]`  input binding with the `{ exact: true }`  expression. By using `{ exact: true }` , a given `RouterLink`  will only be active if its URL is an exact match to the current URL.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由链接的激活状态会向下级联到路由树中的每个层级,所以,父子路由链接可能会同时激活。要覆盖这种行为,可以把 `[routerLinkActiveOptions]`  绑定为 `{ exact: true }`  表达式,这样 `RouterLink`  只有当 URL 与当前 URL 精确匹配时才会激活。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  basics-router-state}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Router state
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 路由器状态
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								After the end of each successful navigation lifecycle, the router builds a tree of `ActivatedRoute`  objects
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								that make up the current state of the router. You can access the current `RouterState`  from anywhere in the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								application using the `Router`  service and the `routerState`  property.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在导航时的每个生命周期成功完成时,路由器会构建出一个 `ActivatedRoute`  组成的树,它表示路由器的当前状态。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以在应用中的任何地方用 `Router`  服务及其 `routerState`  属性来访问当前的 `RouterState`  值。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Each `ActivatedRoute`  in the `RouterState`  provides methods to traverse up and down the route tree
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to get information from parent, child and sibling routes.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`RouterState`  中的每个 `ActivatedRoute`  都提供了从任意激活路由开始向上或向下遍历路由树的一种方式,以获得关于父、子、兄弟路由的信息。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  activated-route}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Activated route
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 激活的路由
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The route path and parameters are available through an injected router service called the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								[ActivatedRoute ](api/router/ActivatedRoute ).
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It has a great deal of useful information including:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								该路由的路径和参数可以通过注入进来的一个名叫[ActivatedRoute ](api/router/ActivatedRoute )的路由服务来获取。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它有一大堆有用的信息,包括:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< table >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < th > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Property
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      属性
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / th > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < th > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Description
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      说明
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / th > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > url< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    An `Observable`  of the route path(s), represented as an array of strings for each part of the route path.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    路由路径的 `Observable`  对象,是一个由路由路径中的各个部分组成的字符串数组。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > data< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    An `Observable`  that contains the `data`  object provided for the route. Also contains any resolved values from the [resolve guard ](#resolve-guard ).
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								    一个 `Observable` ,其中包含提供给路由的 `data`  对象。也包含由[解析守卫( )  ](#resolve-guard )解析而来的值。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > paramMap< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    An `Observable`  that contains a [map ](api/router/ParamMap ) of the required and [optional parameters ](#optional-route-parameters ) specific to the route. The map supports retrieving single and multiple values from the same parameter.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    一个 `Observable` ,其中包含一个由当前路由的必要参数和[可选参数 ](#optional-route-parameters )组成的[map ](api/router/ParamMap )对象。用这个 map 可以获取来自同名参数的单一值或多重值。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > queryParamMap< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    An `Observable`  that contains a [map ](api/router/ParamMap ) of the [query parameters ](#query-parameters ) available to all routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    The map supports retrieving single and multiple values from the query parameter.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    一个 `Observable` ,其中包含一个对所有路由都有效的[查询参数 ](#query-parameters )组成的[map ](api/router/ParamMap )对象。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    用这个 map 可以获取来自查询参数的单一值或多重值。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > fragment< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    An `Observable`  of the URL [fragment ](#fragment ) available to all routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-24 11:16:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								    一个适用于所有路由的 URL 的 [fragment( )  ](#fragment )的 `Observable` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > outlet< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    The name of the `RouterOutlet`  used to render the route. For an unnamed outlet, the outlet name is _primary_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    要把该路由渲染到的 `RouterOutlet`  的名字。对于无名路由,它的路由名是 `primary` ,而不是空串。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > routeConfig< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    The route configuration used for the route that contains the origin path.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    用于该路由的路由配置信息,其中包含原始路径。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > parent< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    The route's parent `ActivatedRoute`  when this route is a [child route ](#child-routing-component ).
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    当该路由是一个[子路由 ](#child-routing-component )时,表示该路由的父级 `ActivatedRoute` 。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > firstChild< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    Contains the first `ActivatedRoute`  in the list of this route's child routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    包含该路由的子路由列表中的第一个 `ActivatedRoute` 。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > children< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    Contains all the [child routes ](#child-routing-component ) activated under the current route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    包含当前路由下所有已激活的[子路由 ](#child-routing-component )。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / table >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								有两个旧式属性仍然是有效的,但它们不如其替代品那样强力,建议不再用它们,它们还将在未来的 Angular 版本中废弃。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-05-10 13:55:06 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**`params` **— An `Observable`  that contains the required and [optional parameters ](#optional-route-parameters ) specific to the route. Use `paramMap`  instead.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**`params` ** —— 一个 `Observable`  对象,其中包含当前路由的必要参数和[可选参数 ](#optional-route-parameters )。请改用 `paramMap` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-05-10 13:55:06 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**`queryParams` **— An `Observable`  that contains the [query parameters ](#query-parameters ) available to all routes.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Use `queryParamMap`  instead.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**`queryParams` ** —— 一个 `Observable`  对象,其中包含对所有路由都有效的[查询参数 ](#query-parameters )。请改用 `queryParamMap` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Router events
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-04 14:06:15 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 路由事件
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								During each navigation, the `Router`  emits navigation events through the `Router.events`  property. These events range from when the navigation starts and ends to many points in between. The full list of navigation events is displayed in the table below.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在每次导航中,`Router`  都会通过 `Router.events`  属性发布一些导航事件。这些事件的范围涵盖了从开始导航到结束导航之间的很多时间点。下表中列出了全部导航事件:
							 
						 
					
						
							
								
									
										
										
										
											2017-08-05 09:41:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< table >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < th > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Router Event
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-05 09:41:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      路由器事件
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / th > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < th > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Description
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      说明
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / th > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > NavigationStart< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/NavigationStart ) triggered when navigation starts.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-05 09:41:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/NavigationStart )会在导航开始时触发。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouteConfigLoadStart< / code > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/RouteConfigLoadStart ) triggered before the `Router` 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      [lazy loads ](#asynchronous-routing ) a route configuration.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/RouteConfigLoadStart )会在 `Router`  [惰性加载 ](#asynchronous-routing ) 某个路由配置之前触发。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouteConfigLoadEnd< / code > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/RouteConfigLoadEnd ) triggered after a route has been lazy loaded.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/RouteConfigLoadEnd )会在惰性加载了某个路由后触发。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RoutesRecognized< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/RoutesRecognized ) triggered when the Router parses the URL and the routes are recognized.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								      本[事件 ](api/router/RoutesRecognized )会在路由器解析完 URL, 
							 
						 
					
						
							
								
									
										
										
										
											2017-08-05 09:41:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > GuardsCheckStart< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/GuardsCheckStart ) triggered when the Router begins the Guards phase of routing.
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/GuardsCheckStart )会在路由器开始 Guard 阶段之前触发。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > ChildActivationStart< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/ChildActivationStart ) triggered when the Router begins activating a route's children.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/ChildActivationStart )会在路由器开始激活路由的子路由时触发。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < code > ActivationStart< / code > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/ActivationStart ) triggered when the Router begins activating a route.
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/ActivationStart )会在路由器开始激活某个路由时触发。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < code > GuardsCheckEnd< / code > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/GuardsCheckEnd ) triggered when the Router finishes the Guards phase of routing successfully.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/GuardsCheckEnd )会在路由器成功完成了 Guard 阶段时触发。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < code > ResolveStart< / code > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/ResolveStart ) triggered when the Router begins the Resolve phase of routing.
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								      本[事件 ](api/router/ResolveStart )会在 `Router`  开始解析( ) 
							 
						 
					
						
							
								
									
										
										
										
											2017-08-05 09:41:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > ResolveEnd< / code > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/ResolveEnd ) triggered when the Router finishes the Resolve phase of routing successfuly.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								      本[事件 ](api/router/ResolveEnd )会在路由器成功完成了路由的解析( ) 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < code > ChildActivationEnd< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/ChildActivationEnd ) triggered when the Router finishes activating a route's children.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/ChildActivationEnd )会在路由器激活了路由的子路由时触发。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < code > ActivationEnd< / code > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/ActivationStart ) triggered when the Router finishes activating a route.
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/ActivationStart )会在路由器激活了某个路由时触发。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > NavigationEnd< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/NavigationEnd ) triggered when navigation ends successfully.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-05 09:41:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/NavigationEnd )会在导航成功结束之后触发。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > NavigationCancel< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/NavigationCancel ) triggered when navigation is canceled.
							 
						 
					
						
							
								
									
										
										
										
											2019-08-14 11:04:26 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      This can happen when a [Route Guard ](#guards ) returns false during navigation,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      or redirects by returning a `UrlTree` .
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-05 09:41:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/NavigationCancel )会在导航被取消之后触发。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      这可能是因为在导航期间某个[路由守卫 ](#guards )返回了 `false` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-08-05 09:41:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > NavigationError< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/NavigationError ) triggered when navigation fails due to an unexpected error.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-05 09:41:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      这个[事件 ](api/router/NavigationError )会在导航由于意料之外的错误而失败时触发。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < code > Scroll< / code > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      An [event ](api/router/Scroll ) that represents a scrolling event.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      本[事件 ](api/router/Scroll )代表一个滚动事件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / table >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								These events are logged to the console when the `enableTracing`  option is enabled also. For an example of filtering router navigation events, visit the [router section ](guide/observables-in-angular#router ) of the [Observables in Angular ](guide/observables-in-angular ) guide.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当启用了 `enableTracing`  选项时,这些事件也同时会记录到控制台中。要想查看对路由导航事件进行过滤的例子,请访问 [Angular 中的可观察对象 ](guide/observables-in-angular )一章的[路由器部分 ](guide/observables-in-angular#router )
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  basics-summary}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Summary
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 总结一下
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The application has a configured router.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The shell component has a `RouterOutlet`  where it can display views produced by the router.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It has `RouterLink` s that users can click to navigate via the router.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								该应用有一个配置过的路由器。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								外壳组件中有一个 `RouterOutlet` ,它能显示路由器所生成的视图。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它还有一些 `RouterLink` ,用户可以点击它们,来通过路由器进行导航。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Here are the key `Router`  terms and their meanings:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-30 20:04:18 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								下面是一些*路由器*中的关键词汇及其含义:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< table >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < th > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Router Part
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      路由器部件
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / th > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < th > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Meaning
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      含义
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / th > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > Router< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 11:25:56 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > Router< / code > (路由器)
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Displays the application component for the active URL.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      Manages navigation from one component to the next.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      为激活的 URL 显示应用组件。管理从一个组件到另一个组件的导航
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouterModule< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      A separate NgModule that provides the necessary service providers
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      and directives for navigating through application views.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-27 22:10:45 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								      一个独立的 NgModule, , 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > Routes< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 11:25:56 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > Routes< / code > (路由数组)
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Defines an array of Routes, each mapping a URL path to a component.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      定义了一个路由数组,每一个都会把一个 URL 路径映射到一个组件。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > Route< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 11:25:56 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > Route< / code > (路由)
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Defines how the router should navigate to a component based on a URL pattern.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      Most routes consist of a path and a component type.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								      定义路由器该如何根据 URL 模式( ) 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouterOutlet< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouterOutlet< / code > (路由出口)
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      The directive (< code > < router-outlet>< / code > ) that marks where the router displays a view.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      该指令(< code > < router-outlet>< / code > )用来标记出路由器该在哪里显示视图。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouterLink< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouterLink< / code > (路由链接)
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      The directive for binding a clickable HTML element to
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      a route. Clicking an element with a < code > routerLink< / code >  directive
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      that is bound to a < i > string< / i >  or a < i > link parameters array< / i >  triggers a navigation.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-14 09:13:52 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      这个指令把可点击的 HTML 元素绑定到某个路由。点击带有 < code > routerLink< / code >  指令(绑定到< i > 字符串< / i > 或< i > 链接参数数组< / i > )的元素时就会触发一次导航。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouterLinkActive< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouterLinkActive< / code > (活动路由链接)
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      The directive for adding/removing classes from an HTML element when an associated
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < code > routerLink< / code >  contained on or inside the element becomes active/inactive.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      当 HTML 元素上或元素内的< code > routerLink< / code > 变为激活或非激活状态时,该指令为这个 HTML 元素添加或移除 CSS 类。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > ActivatedRoute< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > ActivatedRoute< / code > (激活的路由)
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      A service that is provided to each route component that contains route specific
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      information such as route parameters, static data, resolve data, global query params, and the global fragment.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-12-25 19:37:30 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								      为每个路由组件提供的一个服务, , ( ) 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouterState< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > RouterState< / code > (路由器状态)
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      The current state of the router including a tree of the currently activated
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      routes together with convenience methods for traversing the route tree.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      路由器的当前状态包含了一棵由程序中激活的路由构成的树。它包含一些用于遍历路由树的快捷方法。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < b > < i > Link parameters array< / i > < / b > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 11:25:56 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < b > < i > 链接参数数组< / i > < / b > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      An array that the router interprets as a routing instruction.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      You can bind that array to a < code > RouterLink< / code >  or pass the array as an argument to
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      the < code > Router.navigate< / code >  method.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      这个数组会被路由器解释成一个路由操作指南。你可以把一个< code > RouterLink< / code > 绑定到该数组,或者把它作为参数传给< code > Router.navigate< / code > 方法。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < b > < i > Routing component< / i > < / b > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 11:25:56 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < b > < i > 路由组件< / i > < / b > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      An Angular component with a < code > RouterOutlet< / code >  that displays views based on router navigations.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      一个带有< code > RouterOutlet< / code > 的 Angular 组件,它根据路由器的导航来显示相应的视图。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / table >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  sample-app-intro}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## The sample application
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## 范例应用
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This guide describes development of a multi-page routed sample application.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Along the way, it highlights design decisions and describes key features of the router such as:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本章要讲的是如何开发一个带路由的多页面应用。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								接下来会重点讲它的设计决策,并描述路由的关键特性,比如:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Organizing the application features into modules. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把应用的各个特性组织成模块。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Navigating to a component (*Heroes* link to "Heroes List"). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:15:36 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   导航到组件(*Heroes* 链接到“英雄列表”组件)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Including a route parameter (passing the Hero `id`  while routing to the "Hero Detail"). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   包含一个路由参数(当路由到“英雄详情”时,把该英雄的 `id`  传进去)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Child routes (the *Crisis Center*  has its own routes). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   子路由(*危机中心*特性有一组自己的路由)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  The `CanActivate`  guard (checking route access). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   `CanActivate`  守卫(检查路由的访问权限)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  The `CanActivateChild`  guard (checking child route access). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   `CanActivateChild`  守卫(检查子路由的访问权限)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  The `CanDeactivate`  guard (ask permission to discard unsaved changes). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   `CanDeactivate`  守卫(询问是否丢弃未保存的更改)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  The `Resolve`  guard (pre-fetching route data). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   `Resolve`  守卫(预先获取路由数据)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Lazy loading feature modules. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   惰性加载特性模块。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  The `CanLoad`  guard (check before loading feature module assets). 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   `CanLoad`  守卫(在加载特性模块之前进行检查)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The guide proceeds as a sequence of milestones as if you were building the app step-by-step.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								But, it is not a tutorial and it glosses over details of Angular application construction
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								that are more thoroughly covered elsewhere in the documentation.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果打算一步步构建出本应用,本章就会经过一系列里程碑。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								但是,本章并不是一个教程,它隐藏了构造 Angular 应用的细节,那些细节会在本文档的其它地方展开。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The full source for the final version of the app can be seen and downloaded from the < live-example > < / live-example > .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本应用的最终版源码可以在< live-example > < / live-example > 中查看和下载。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### The sample application in action
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 范例程序的动图
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Imagine an application that helps the _Hero Employment Agency_  run its business.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Heroes need work and the agency finds crises for them to solve.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								假设本程序会用来帮助“英雄管理局”运行他们的业务。
							 
						 
					
						
							
								
									
										
										
										
											2017-09-19 18:25:56 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								英雄们需要找工作,而“英雄管理局”为他们寻找待解决的危机。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The application has three main feature areas:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本应用具有三个主要的特性区:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  A *Crisis Center*  for maintaining the list of crises for assignment to heroes. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								   *危机中心*用于维护要指派给英雄的危机列表。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  A *Heroes*  area for maintaining the list of heroes employed by the agency. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								   *英雄*区用于维护管理局雇佣的英雄列表。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  An *Admin*  area to manage the list of crises and heroes. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   *管理*区会管理危机和英雄的列表。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Try it by clicking on this < live-example  title = "Hero Employment Agency Live Example" > live example link< / live-example > .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-14 09:13:52 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								点击< live-example  title = "英雄职介中心的在线例子" > < / live-example > 试用一下。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Once the app warms up, you'll see a row of navigation buttons
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and the *Heroes*  view with its list of heroes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								等应用热身完毕,你就会看到一排导航按钮,以及一个*英雄列表*视图。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/hero-list.png'  alt = "Hero List" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Select one hero and the app takes you to a hero editing screen.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-30 20:04:18 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								选择其中之一,该应用就会把你带到此英雄的编辑页面。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/hero-detail.png'  alt = "Crisis Center Detail" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Alter the name.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Click the "Back" button and the app returns to the heroes list which displays the changed hero name.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Notice that the name change took effect immediately.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								修改完名字,再点击“后退”按钮,应用又回到了英雄列表页,其中显示的英雄名已经变了。注意,对名字的修改会立即生效。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Had you clicked the browser's back button instead of the "Back" button,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the app would have returned you to the heroes list as well.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Angular app navigation updates the browser history as normal web navigation does.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								另外你也可以点击浏览器本身的后退按钮,这样也同样会回到英雄列表页。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 Angular 应用中导航也会和标准的 Web 导航一样更新浏览器中的历史。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Now click the *Crisis Center*  link for a list of ongoing crises.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现在,点击*危机中心*链接,前往*危机*列表页。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/crisis-center-list.png'  alt = "Crisis Center List" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Select a crisis and the application takes you to a crisis editing screen.
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The _Crisis Detail_  appears in a child component on the same page, beneath the list.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								选择其中之一,该应用就会把你带到此危机的编辑页面。
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*危机详情*是当前页的子组件,就在列表的紧下方。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Alter the name of a crisis.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Notice that the corresponding name in the crisis list does _not_  change.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								修改危机的名称。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								注意,危机列表中的相应名称**并没有**修改。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/crisis-center-detail.png'  alt = "Crisis Center Detail" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Unlike *Hero Detail* , which updates as you type,
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*Crisis Detail* changes are temporary until you either save or discard them by pressing the "Save" or "Cancel" buttons.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Both buttons navigate back to the *Crisis Center*  and its list of crises.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这和*英雄详情*页略有不同。*英雄详情*会立即保存你所做的更改。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								而*危机详情*页中,你的更改都是临时的 —— 除非按“保存”按钮保存它们,或者按“取消”按钮放弃它们。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这两个按钮都会导航回*危机中心*,显示危机列表。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								***Do not click either button yet***.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Click the browser back button or the "Heroes" link instead.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								***先不要点击这些按钮***。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								而是点击浏览器的后退按钮, 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Up pops a dialog box.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这时会弹出一个对话框。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/confirm-dialog.png'  alt = "Confirm Dialog" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can say "OK" and lose your changes or click "Cancel" and continue editing.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以回答“确定”以放弃这些更改,或者回答“取消”来继续编辑。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Behind this behavior is the router's `CanDeactivate`  guard.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The guard gives you a chance to clean-up or ask the user's permission before navigating away from the current view.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这种行为的幕后是路由器的 `CanDeactivate`  守卫。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								该守卫让你有机会进行清理工作或在离开当前视图之前请求用户的许可。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `Admin`  and `Login`  buttons illustrate other router capabilities to be covered later in the guide.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This short introduction will do for now.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`Admin`  和 `Login`  按钮用于演示路由器的其它能力,本章稍后的部分会讲解它们。这里只是个简短的讲解。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Proceed to the first application milestone.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这就开始本应用的第一个里程碑。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-30 22:10:32 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  getting-started}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## Milestone 1: Getting started
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								## 里程碑 1:   
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Begin with a simple version of the app that navigates between two empty views.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-30 20:04:18 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								开始本应用的一个简版,它在两个空路由之间导航。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/router-1-anim.gif'  alt = "App in action" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  import}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Generate a sample application to follow the walkthrough.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								遵循这些步骤生成一个范例应用。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng new angular-router-sample
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Define Routes
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-04 15:43:45 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 定义路由
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								A router must be configured with a list of route definitions.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器必须用“路由定义”的列表进行配置。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-30 22:10:32 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Each definition translates to a [Route ](api/router/Route ) object which has two things: a
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`path` , the URL path segment for this route; and a 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`component` , the component associated with this route. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								每个定义都被翻译成了一个[Route ](api/router/Route )对象。该对象有一个 `path`  字段,表示该路由中的 URL 路径部分,和一个 `component`  字段,表示与该路由相关联的组件。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router draws upon its registry of definitions when the browser URL changes
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								or when application code tells the router to navigate along a route path.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当浏览器的 URL 变化时或在代码中告诉路由器导航到一个路径时,路由器就会翻出它用来保存这些路由定义的注册表。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In simpler terms, you might say this of the first route:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								直白的说,你可以这样解释第一个路由:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  When the browser's location URL changes to match the path segment `/crisis-center` , then 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the router activates an instance of the `CrisisListComponent`  and displays its view.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   当浏览器地址栏的 URL 变化时,如果它匹配上了路径部分 `/crisis-center` ,路由器就会激活一个 `CrisisListComponent`  的实例,并显示它的视图。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  When the application requests navigation to the path `/crisis-center` , the router 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								activates an instance of `CrisisListComponent` , displays its view, and updates the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								browser's address location and history with the URL for that path.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   **当应用程序请求导航到路径 `/crisis-center` 时,路由器激活一个 `CrisisListComponent` 的实例,显示它的视图,并将该路径更新到浏览器地址栏和历史。** 
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The first configuration defines an array of two routes with simple paths leading to the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`CrisisListComponent`  and `HeroListComponent` . Generate the `CrisisList`  and `HeroList`  components. 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								第一个配置定义了由两个路由构成的数组,它们用简单的路径指向了 `CrisisListComponent`  和 `HeroListComponent` 。来生成 `CrisisList`  和 `HeroList` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component crisis-list
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component hero-list
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Replace the contents of each component with the sample HTML below.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-04 15:43:45 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把每个组件的内容都替换成下列范例 HTML。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-02-07 16:57:18 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/crisis-list/crisis-list.component.html"  path = "router/src/app/crisis-list/crisis-list.component.1.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-02-07 16:57:18 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/hero-list/hero-list.component.html"  path = "router/src/app/hero-list/hero-list.component.1.html"  region = "template" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Register Router and Routes
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-20 09:56:09 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 注册路由器与路由定义
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In order to use the Router, you must first register the `RouterModule`  from the `@angular/router`  package. Define an array of routes, `appRoutes` , and pass them to the `RouterModule.forRoot()`  method. It returns a module, containing the configured `Router`  service provider, plus other providers that the routing library requires. Once the application is bootstrapped, the `Router`  performs the initial navigation based on the current browser URL.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								要使用路由器,必须先注册来自 `@angular/router`  包中的 `RouterModule` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								定义一个路由数组 `appRoutes`  并把它传给 `RouterModule.forRoot()`  方法。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它会返回一个模块,其中包含配置好的 `Router`  服务提供商,以及路由库所需的其它提供商。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								一旦启动了应用,`Router`  就会根据当前的浏览器 URL 进行首次导航。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-important" >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  **Note:**  The `RouterModule.forRoot`  method is a pattern used to register application-wide providers. Read more about application-wide providers in the [Singleton services ](guide/singleton-services#forRoot-router ) guide.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  **注意:**  `RouterModule.forRoot`  方法是用于注册全应用级提供商的编码模式。要详细了解全应用级提供商,参见[单例服务 ](guide/singleton-services#forRoot-router ) 一章。
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.1.ts"  header = "src/app/app.module.ts (first-config)"  region = "first-config" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-27 10:51:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Adding the configured `RouterModule`  to the `AppModule`  is sufficient for simple route configurations.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								As the application grows, you'll want to [refactor the routing configuration ](#refactor-the-routing-configuration-into-a-routing-module ) into a separate file
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and create a ** [Routing Module ](#routing-module )**, a special type of `Service Module`  dedicated to the purpose
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								of routing in feature modules.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								作为简单的路由配置,将添加配置好的 `RouterModule`  到 `AppModule`  中就足够了。
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								随着应用的成长,你将需要[将路由配置重构 ](#refactor-the-routing-configuration-into-a-routing-module )到单独的文件中,并创建**[路由模块 ](#routing-module )** - 一种特别的、专门为特性模块的路由器服务的**服务模块**。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Registering the `RouterModule.forRoot()`  in the `AppModule`  imports makes the `Router`  service available everywhere in the application.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把 `RouterModule.forRoot()`  注册到 `AppModule`  的 `imports`  中,能让该 `Router`  服务在应用的任何地方都能使用。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  shell}
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Add the Router Outlet
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 添加路由出口
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The root `AppComponent`  is the application shell. It has a title, a navigation bar with two links, and a router outlet where the router swaps components on and off the page. Here's what you get:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								根组件 `AppComponent`  是本应用的壳。它在顶部有一个标题、一个带两个链接的导航条,在底部有一个*路由器出口*,路由器会在它所指定的位置上把组件切入或调出页面。就像下图中所标出的:
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/shell-and-outlet.png'  alt = "Shell" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router outlet serves as a placeholder when the routed components will be rendered below it.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由出口扮演一个占位符的角色,路由组件将会渲染在它的下方。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  shell-template}
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The corresponding component template looks like this:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								该组件所对应的模板是这样的:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.1.html"  header = "src/app/app.component.html" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  wildcard}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Define a Wildcard route
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 定义通配符路由
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You've created two routes in the app so far, one to `/crisis-center`  and the other to `/heroes` . Any other URL causes the router to throw an error and crash the app.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你以前在应用中创建过两个路由,一个是 `/crisis-center` ,另一个是 `/heroes` 。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								所有其它 URL 都会导致路由器抛出错误,并让应用崩溃。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Add a **wildcard**  route to intercept invalid URLs and handle them gracefully.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								A _wildcard_  route has a path consisting of two asterisks. It matches _every_  URL.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router will select _this_  route if it can't match a route earlier in the configuration.
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								A wildcard route can navigate to a custom "404 Not Found" component or [redirect ](#redirect ) to an existing route.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								可以添加一个**通配符**路由来拦截所有无效的 URL, 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*通配符*路由的 `path`  是两个星号(`**` ),它会匹配*任何* URL。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当路由器匹配不上以前定义的那些路由时,它就会选择*这个*路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								通配符路由可以导航到自定义的“404 Not Found”组件, 重定向 ](guide/router#redirect )到一个现有路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router selects the route with a [_first match wins_ ](#example-config ) strategy.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Wildcard routes are the least specific routes in the route configuration.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Be sure it is the _last_  route in the configuration.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器使用[先匹配者优先 ](guide/router#example-config )的策略来选择路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								通配符路由是路由配置中最没有特定性的那个,因此务必确保它是配置中的*最后一个*路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								To test this feature, add a button with a `RouterLink`  to the `HeroListComponent`  template and set the link to `"/sidekicks"` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								要测试本特性,请往 `HeroListComponent`  的模板中添加一个带 `RouterLink`  的按钮,并且把它的链接设置为 `"/sidekicks"` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/hero-list/hero-list.component.1.html"  header = "src/app/hero-list/hero-list.component.html (excerpt)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The application will fail if the user clicks that button because you haven't defined a `"/sidekicks"`  route yet.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当用户点击该按钮时,应用就会失败,因为你尚未定义过 `"/sidekicks"`  路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Instead of adding the `"/sidekicks"`  route, define a `wildcard`  route instead and have it navigate to a simple `PageNotFoundComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								不要添加 `"/sidekicks"`  路由,而是定义一个“通配符”路由,让它直接导航到 `PageNotFoundComponent`  组件。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.1.ts"  header = "src/app/app.module.ts (wildcard)"  region = "wildcard" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Create the `PageNotFoundComponent`  to display when users visit invalid URLs.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								创建 `PageNotFoundComponent` ,以便在用户访问无效网址时显示它。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component page-not-found
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/page-not-found/page-not-found.component.html"  header = "src/app/page-not-found.component.html (404 component)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Now when the user visits `/sidekicks` , or any other invalid URL, the browser displays "Page not found".
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The browser address bar continues to point to the invalid URL.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								现在,当用户访问 `/sidekicks`  或任何无效的 URL 时, 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								浏览器的地址栏仍指向无效的 URL。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  redirect}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Set up redirects
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 设置跳转
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When the application launches, the initial URL in the browser bar is something like:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								应用启动时,浏览器地址栏中的初始 URL 是这样的:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example >  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  localhost:4200
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								That doesn't match any of the concrete configured routes which means
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								the router falls through to the wildcard route and displays the `PageNotFoundComponent` .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它不能匹配上任何具体的路由,于是就会走到通配符路由中去,并且显示 `PageNotFoundComponent` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-22 11:19:24 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The application needs a **default route**  to a valid page.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The default page for this app is the list of heroes.
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The app should navigate there as if the user clicked the "Heroes" link or pasted `localhost:4200/heroes`  into the address bar.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这个应用需要一个有效的**默认路由**,在这里应该用英雄列表作为默认页。当用户点击"Heroes"链接或把 `localhost:4200/heroes`  粘贴到地址栏时,它应该导航到列表页。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The preferred solution is to add a `redirect`  route that translates the initial relative URL (`''` )
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to the desired default path (`/heroes` ). The browser address bar shows `.../heroes`  as if you'd navigated there directly.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								首选方案是添加一个 `redirect`  路由来把最初的相对路径(`''` )转换成期望的默认路径(`/heroes` )。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								浏览器地址栏会显示 `.../heroes` ,就像你直接导航到那里一样。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Add the default route somewhere _above_  the wildcard route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It's just above the wildcard route in the following excerpt showing the complete `appRoutes`  for this milestone.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在通配符路由*上方*添加一个默认路由。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在下方的代码片段中,它出现在通配符路由的紧上方,展示了这个里程碑的完整 `appRoutes` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.1.ts"  header = "src/app/app-routing.module.ts (appRoutes)"  region = "appRoutes" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								A redirect route requires a `pathMatch`  property to tell the router how to match a URL to the path of a route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router throws an error if you don't.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In this app, the router should select the route to the `HeroListComponent`  only when the *entire URL*  matches `''` ,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								so set the `pathMatch`  value to `'full'` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								重定向路由需要一个 `pathMatch`  属性,来告诉路由器如何用 URL 去匹配路由的路径,否则路由器就会报错。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在本应用中,路由器应该只有在*完整的 URL*等于 `''`  时才选择 `HeroListComponent`  组件,因此要把 `pathMatch`  设置为 `'full'` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Technically, `pathMatch = 'full'`  results in a route hit when the *remaining* , unmatched segments of the URL match `''` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In this example, the redirect is in a top level route so the *remaining*  URL and the *entire*  URL are the same thing.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								从技术角度说,`pathMatch = 'full'`  导致 URL 中*剩下的*、未匹配的部分必须等于 `''` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								在这个例子中,跳转路由在一个顶级路由中,因此*剩下的*URL 和*完整的*URL 是一样的。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The other possible `pathMatch`  value is `'prefix'`  which tells the router
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to match the redirect route when the *remaining*  URL ** *begins*** with the redirect route's _prefix_  path.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`pathMatch`  的另一个可能的值是 `'prefix'` ,它会告诉路由器:当*剩下的*URL 以这个跳转路由中的 `prefix`  值开头时,就会匹配上这个跳转路由。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Don't do that here.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If the `pathMatch`  value were `'prefix'` , _every_  URL would match `''` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在这里不能这么做!如果 `pathMatch`  的值是 `'prefix'` ,那么*每个*URL 都会匹配上 `''` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Try setting it to `'prefix'`  then click the `Go to sidekicks`  button.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Remember that's a bad URL and you should see the "Page not found" page.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Instead, you're still on the "Heroes" page.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Enter a bad URL in the browser address bar.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You're instantly re-routed to `/heroes` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								_Every_ URL, good or bad, that falls through to _this_  route definition
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								will be a match.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								尝试把它设置为 `'prefix'` ,然后点击 `Go to sidekicks`  按钮。别忘了,它是一个无效 URL, 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								但是,你仍然在“英雄列表”页中。在地址栏中输入一个无效的 URL, `/heroes` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								*每一个* URL, , 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The default route should redirect to the `HeroListComponent`  _only_  when the _entire_  url is  `''` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Remember to restore the redirect to `pathMatch = 'full'` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								默认路由应该只有在*整个*URL 等于 `''`  时才重定向到 `HeroListComponent` ,别忘了把重定向路由设置为 `pathMatch = 'full'` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Learn more in Victor Savkin's
							 
						 
					
						
							
								
									
										
										
										
											2018-11-24 14:56:06 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								[post on redirects ](http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes ).
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								要了解更多,参见 Victor Savkin 的帖子[关于重定向 ](http://victorsavkin.com/post/146722301646/angular-router-empty-paths-componentless-routes )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Basics wrap up
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### “起步阶段”总结
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You've got a very basic navigating app, one that can switch between two views
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								when the user clicks a link.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你得到了一个非常基本的、带导航的应用,当用户点击链接时,它能在两个视图之间切换。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You've learned how to do the following:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你学到了如何:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Load the router library. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   加载路由库
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Add a nav bar to the shell template with anchor tags, `routerLink`   and `routerLinkActive`  directives. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   往壳组件的模板中添加一个导航条,导航条中有一些 A 标签、`routerLink`  指令和 `routerLinkActive`  指令
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Add a `router-outlet`  to the shell template where views will be displayed. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   往壳组件的模板中添加一个 `router-outlet`  指令,视图将会被显示在那里
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Configure the router module with `RouterModule.forRoot()` . 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   用 `RouterModule.forRoot()`  配置路由器模块
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Set the router to compose HTML5 browser URLs. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-08-23 21:51:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   设置路由器,使其合成 HTML5 模式的浏览器 URL
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  handle invalid routes with a `wildcard`  route. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   使用通配符路由来处理无效路由
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  navigate to the default route when the app launches with an empty path. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   当应用在空路径下启动时,导航到默认路由
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The starter app's structure looks like this:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这个初学者应用的结构是这样的:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = 'filetree' >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    angular-router-sample
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      src
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        app
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          crisis-list
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            crisis-list.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          crisis-list.component.html
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          crisis-list.component.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          hero-list
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            hero-list.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            hero-list.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            hero-list.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          page-not-found
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            page-not-found.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            page-not-found.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            page-not-found.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          app.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          app.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          app.component.ts
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          app.module.ts
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        main.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        index.html
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        styles.css
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        tsconfig.json
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      node_modules ...
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      package.json
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Here are the files discussed in this milestone.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								下面是当前里程碑中讨论过的文件列表:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "app.component.html"  path = "router/src/app/app.component.1.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "app.module.ts"  path = "router/src/app/app.module.1.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-02-07 16:57:18 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "hero-list/hero-list.component.html"  path = "router/src/app/hero-list/hero-list.component.1.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-02-07 16:57:18 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-list/crisis-list.component.html"  path = "router/src/app/crisis-list/crisis-list.component.1.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "page-not-found/page-not-found.component.html"  path = "router/src/app/page-not-found/page-not-found.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "index.html"  path = "router/src/index.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-30 22:10:32 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  routing-module}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## Milestone 2: *Routing module*
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-17 18:26:55 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								## 里程碑 2:   
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In the initial route configuration, you provided a simple setup with two routes used
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to configure the application for routing. This is perfectly fine for simple routing.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								As the application grows and you make use of more `Router`  features, such as guards,
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								resolvers, and child routing, you'll naturally want to refactor the routing configuration into its own file.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								We recommend moving the routing information into a special-purpose module called a *Routing Module* .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在原始的路由配置中,你提供了仅有两个路由的简单配置来设置应用的路由。对于简单的路由,这没有问题。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  随着应用的成长,你用到了更多**路由器**特性,比如守卫、解析器和子路由等,你会很自然地想要重构路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  我们建议将路由信息移到一个单独的特殊用途的模块,叫做**路由模块**。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The **Routing Module**  has several characteristics:
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**路由模块**有一系列特性:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Separates routing concerns from other application concerns. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 16:48:44 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把路由这个关注点从其它应用类关注点中分离出去。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Provides a module to replace or remove when testing the application. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 16:48:44 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   测试特性模块时,可以替换或移除路由模块。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Provides a well-known location for routing service providers including guards and resolvers. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 16:48:44 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   为路由服务提供商(包括守卫和解析器等)提供一个共同的地方。
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Does **not**  declare components. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 16:48:44 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   **不要**声明组件。
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-12 11:20:07 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  integrate-routing}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Integrate routing with your app
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 把路由集成到应用中
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-12 11:20:07 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The sample routing application does not include routing by default.
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								When you use the [Angular CLI ](cli ) to create a project that will use routing, set the `--routing`  option for the project or app, and for each NgModule.
							 
						 
					
						
							
								
									
										
										
										
											2019-10-26 21:35:03 +07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								When you create or initialize a new project (using the CLI [`ng new` ](cli/new ) command) or a new app (using the [`ng generate app` ](cli/generate ) command), specify the `--routing`  option. This tells the CLI to include the `@angular/router`  npm package and create a file named `app-routing.module.ts` .
							 
						 
					
						
							
								
									
										
										
										
											2018-09-12 11:20:07 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You can then use routing in any NgModule that you add to the project or app.
							 
						 
					
						
							
								
									
										
										
										
											2018-09-12 13:06:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由应用范例中默认不包含路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								要想在使用 [Angular CLI ](cli ) 创建项目时支持路由,请为项目或应用的每个 NgModule 设置 `--routing`  选项。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								当你用 CLI 命令 [`ng new` ](cli/new ) 创建新项目或用 [`ng generate app` ](cli/generate ) 命令创建新应用,请指定 `--routing`  选项。这会告诉 CLI 包含上 `@angular/router`  包,并创建一个名叫 `app-routing.module.ts`  的文件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								然后你就可以在添加到项目或应用中的任何 NgModule 中使用路由功能了。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-12 13:06:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								For example, the following command generates an NgModule that can use routing.
							 
						 
					
						
							
								
									
										
										
										
											2018-09-12 11:20:07 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								比如,可以用下列命令生成带路由的 NgModule。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-12 11:20:07 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								```sh
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								ng generate module my-module --routing
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								```
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This creates a separate file named `my-module-routing.module.ts`  to store the NgModule's routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The file includes an empty `Routes`  object that you can fill with routes to different components and NgModules.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这将创建一个名叫 `my-module-routing.module.ts`  的独立文件,来保存这个 NgModule 的路由信息。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								该文件包含一个空的 `Routes`  对象,你可以使用一些指向各个组件和 NgModule 的路由来填充该对象。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  routing-refactor}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Refactor the routing configuration into a _routing module_
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 将路由配置重构为*路由模块*
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Create an `AppRouting`  module in the `/app`  folder to contain the routing configuration.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `/app`  目录下创建一个 `AppRouting`  模块,以包含路由配置。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate module app-routing --module app --flat
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-21 14:56:31 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Import the `CrisisListComponent` , `HeroListComponent` , and `PageNotFoundComponent`  symbols
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								just like you did in the `app.module.ts` . Then move the `Router`  imports
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								and routing configuration, including `RouterModule.forRoot()` , into this routing module.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								导入 `CrisisListComponent` 、`HeroListComponent`  和 `PageNotFoundCompponent`  组件,就像 `app.module.ts`  中那样。然后把 `Router`  的导入语句和路由配置以及 `RouterModule.forRoot()`  移入这个路由模块中。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Re-export the Angular `RouterModule`  by adding it to the module `exports`  array.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								By re-exporting the `RouterModule`  here the components declared in `AppModule`  will have access to router directives such as `RouterLink`  and `RouterOutlet` .
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-27 22:56:04 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把 Angular 的 `RouterModule` 添加到该模块的 `exports`  数组中,以便再次导出它 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								通过再次导出 `RouterModule` ,当在 `AppModule`  中导入了 `AppRoutingModule`  之后,那些声明在 `AppModule`  中的组件就可以访问路由指令了,比如 `RouterLink`  和 `RouterOutlet` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								After these steps, the file should look like this.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								做完这些之后,该文件变成了这样:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.1.ts"  header = "src/app/app-routing.module.ts" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-03-12 11:33:48 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Next, update the `app.module.ts`  file, removing `RouterModule.forRoot`  in
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								the `imports`  array.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								接下来,修改 `app.module.ts`  文件,从 `imports`  数组中移除 `RouterModule.forRoot` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.2.ts"  header = "src/app/app.module.ts" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Later in this guide you will create [multiple routing modules ](#heroes-functionality ) and discover that
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								you must import those routing modules [in the correct order ](#routing-module-order ).
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本章稍后的部分,你将创建一个[多路由模块 ](#heroes-functionality ),并揭示你为何必须[以正确的顺序导入那些路由模块 ](#routing-module-order )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The application continues to work just the same, and you can use `AppRoutingModule`  as
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the central place to maintain future routing configuration.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-02-02 02:29:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								应用继续照常运行,你可以把路由模块作为将来每个模块维护路由配置的中心位置。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  why-routing-module}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Do you need a _Routing Module_?
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 你需要**路由模块**吗?
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The _Routing Module_  *replaces*  the routing configuration in the root or feature module.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								_Either_ configure routes in the Routing Module _or_  within the module itself but not in both.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**路由模块**在根模块或者特性模块替换了路由配置。在路由模块或者在模块内部配置路由,但不要同时在两处都配置。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The Routing Module is a design choice whose value is most obvious when the configuration is complex
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and includes specialized guard and resolver services.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It can seem like overkill when the actual configuration is dead simple.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由模块是设计选择,它的价值在配置很复杂,并包含专门守卫和解析器服务时尤其明显。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								在配置很简单时,它可能看起来很多余。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Some developers skip the Routing Module (for example, `AppRoutingModule` ) when the configuration is simple and
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								merge the routing configuration directly into the companion module (for example, `AppModule` ).
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在配置很简单时,一些开发者跳过路由模块(例如 `AppRoutingModule` ),并将路由配置直接混合在关联模块中(比如 `AppModule`  )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Choose one pattern or the other and follow that pattern consistently.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								从中选择一种模式,并坚持模式的一致性。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Most developers should always implement a Routing Module for the sake of consistency.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It keeps the code clean when configuration becomes complex.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It makes testing the feature module easier.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Its existence calls attention to the fact that a module is routed.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It is where developers expect to find and expand routing configuration.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								大多数开发者都应该采用路由模块,以保持一致性。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它在配置复杂时,能确保代码干净。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它让测试特性模块更加容易。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它的存在让人一眼就能看出这个模块是带路由的。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								开发者可以很自然的从路由模块中查找和扩展路由配置。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-30 22:10:32 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  heroes-feature}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## Milestone 3: Heroes feature
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-17 18:26:55 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## 里程碑 3: 英雄特征区
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You've seen how to navigate using the `RouterLink`  directive.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Now you'll learn the following:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你刚刚学习了如何用 `RouterLink`  指令进行导航。接下来要:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Organize the app and routes into *feature areas*  using modules. 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								   用模块把应用和路由组织为一些*特性区*
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Navigate imperatively from one component to another. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   命令式的从一个组件导航到另一个
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Pass required and optional information in route parameters. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   通过路由传递必要信息和可选信息
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This example recreates the heroes feature in the "Services" episode of the
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								[Tour of Heroes tutorial ](tutorial/toh-pt4 "Tour of Heroes: Services" ),
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								and you'll be copying much of the code
							 
						 
					
						
							
								
									
										
										
										
											2017-04-21 17:21:45 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								from the < live-example  name = "toh-pt4"  title = "Tour of Heroes: Services example code" > < / live-example > .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这个例子重写了[《英雄指南》 ](tutorial/toh-pt4 "Tour of Heroes: Services" )的“服务”部分的英雄列表特性,你可以从< live-example  name = "toh-pt4"  title = "英雄指南:各个服务的范例代码" ></ live-example > 中复制大部分代码过来。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Here's how the user will experience this version of the app:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								下面是用户将看到的版本:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/router-2-anim.gif'  alt = "App in action" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								A typical application has multiple *feature areas* ,
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								each dedicated to a particular business purpose.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								典型的应用具有多个*特性区*,每个特性区都专注于特定的业务用途。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								While you could continue to add files to the `src/app/`  folder,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								that is unrealistic and ultimately not maintainable.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Most developers prefer to put each feature area in its own folder.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-23 09:43:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								虽然你也可以把文件都放在 `src/app/`  目录下,但那样是不现实的,而且很难维护。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								大部分开发人员更喜欢把每个特性区都放在它自己的目录下。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You are about to break up the app into different *feature modules* , each with its own concerns.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Then you'll import into the main module and navigate among them.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你准备把应用拆分成多个不同的*特性模块*,每个特有模块都有自己的关注点。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								然后,你就会把它们导入到主模块中,并且在它们之间导航。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  heroes-functionality}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Add heroes functionality
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 添加英雄管理功能
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Follow these steps:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								遵循下列步骤:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Create a `HeroesModule`  with routing in the heroes folder and register it with the root `AppModule` . This is where you'll be implementing the *hero management* . 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  在 `heroes`  目录下创建一个带路由的 `HeroesModule` ,并把它注册进 `AppModule`  中。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  这里就是你实现*英雄管理*特性的地方。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate module heroes/heroes --module app --flat --routing
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Move the placeholder `hero-list`  folder that's in the `app`  into the `heroes`  folder. 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  把 `app`  下占位用的 `hero-list`  移到 `heroes`  目录中。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Copy the contents of the `heroes/heroes.component.html`  from 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  the < live-example  name = "toh-pt4"  title = "Tour of Heroes: Services example code" > "Services" tutorial</ live-example >  into the `hero-list.component.html`  template.
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  从 < live-example  name = "toh-pt4"  title = "Tour of Heroes: Services example code" > 教程的 "服务" 部分</ live-example > 把 `heroes/heroes.component.html`  的内容复制到 `hero-list.component.html`  模板中。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  *  Relabel the `<h2>`  to `<h2>HEROES</h2>` .
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								     给 `<h2>`  加文字,改成 `<h2>HEROES</h2>` 。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  *  Delete the `<app-hero-detail>`  component at the bottom of the template.
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								     删除模板底部的 `<app-hero-detail>`  组件。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Copy the contents of the `heroes/heroes.component.css`  from the live example into the `hero-list.component.css`  file. 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  把在线例子中 `heroes/heroes.component.css`  文件的内容复制到 `hero-list.component.css`  文件中。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Copy the contents of the `heroes/heroes.component.ts`  from the live example into the `hero-list.component.ts`  file. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  把在线例子中 `heroes/heroes.component.ts`  文件的内容复制到 `hero-list.component.ts`  文件中。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  *  Change the component class name to `HeroListComponent` .
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    把组件类名改为 `HeroListComponent` 。
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  *  Change the `selector`  to `app-hero-list` .
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    把 `selector`  改为 `app-hero-list` 。
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   Selectors are **not required**  for _routed components_  due to the components are dynamically inserted when the page is rendered, but are useful for identifying and targeting them in your HTML element tree.
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   对于**路由组件**来说,这些选择器**不是必须的**,因为这些组件是在渲染页面时动态插入的,不过选择器对于在 HTML 元素树中标记和选中它们是很有用的。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Copy the `hero-detail`  folder, the `hero.ts` , `hero.service.ts` ,  and `mock-heroes.ts`  files into the `heroes`  subfolder. 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  把 `hero-detail`  目录中的 `hero.ts` 、`hero.service.ts`  和 `mock-heroes.ts`  文件复制到 `heroes`  子目录下。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Copy the `message.service.ts`  into the `src/app`  folder. 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  把 `message.service.ts`  文件复制到 `src/app`  目录下。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Update the relative path import to the `message.service`  in the `hero.service.ts`  file. 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  在 `hero.service.ts`  文件中修改导入 `message.service`  的相对路径。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Next, you'll update the `HeroesModule`  metadata.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								接下来,还要修改 `HeroesModule`  的元数据。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  *  Import and add the `HeroDetailComponent`  and `HeroListComponent`  to the `declarations`  array in the `HeroesModule` .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    导入 `HeroDetailComponent`  和 `HeroListComponent` ,并添加到 `HeroesModule`  模块的 `declarations`  数组中。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/heroes.module.ts"  header = "src/app/heroes/heroes.module.ts" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When you're done, you'll have these *hero management*  files:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-09 17:16:53 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								做完这些,你就有了四个*英雄管理*特性区的文件:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = 'filetree' >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    src/app/heroes
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      hero-detail
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          hero-detail.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          hero-detail.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' >       
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          hero-detail.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      hero-list
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          hero-list.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          hero-list.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' >       
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          hero-list.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      hero.service.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      hero.ts
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      heroes-routing.module.ts
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      heroes.module.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      mock-heroes.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  hero-routing-requirements}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### *Hero* feature routing requirements
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### *英雄*特性区的路由需求
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The heroes feature has two interacting components, the hero list and the hero detail.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The list view is self-sufficient; you navigate to it, it gets a list of heroes and displays them.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								“英雄”特性有两个相互协作的组件,列表和详情。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								列表视图是自给自足的,你导航到它,它会自行获取英雄列表并显示他们。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The detail view is different. It displays a particular hero. It can't know which hero to show on its own.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								That information must come from outside.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								详情视图就不同了。它要显示一个特定的英雄,但是它本身却无法知道显示哪一个,此信息必须来自外部。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								When the user selects a hero from the list, the app should navigate to the detail view
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and show that hero.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You tell the detail view which hero to display by including the selected hero's id in the route URL.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当用户从列表中选择了一个英雄时,应用就导航到详情页以显示那个英雄。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  通过把所选英雄的 id 编码进路由的 URL 中,就能告诉详情视图该显示哪个英雄。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Import the hero components from their new locations in the `src/app/heroes/`  folder, define the two hero routes.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								从新位置 `src/app/heroes/`  目录中导入英雄相关的组件,定义两个“英雄管理”路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Now that you have routes for the `Heroes`  module, register them with the `Router`  via the
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`RouterModule`  _almost_  as you did in the `AppRoutingModule` . 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现在,你有了 `Heroes`  模块的路由,还得在 `RouterModule`  中把它们注册给*路由器*,和 `AppRoutingModule`  中的做法几乎完全一样。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								There is a small but critical difference.
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In the `AppRoutingModule` , you used the static ** `RouterModule.forRoot()` ** method to register the routes and application level service providers.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In a feature module you use the static ** `forChild` ** method.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这里有少量但是关键的不同点。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-23 09:43:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `AppRoutingModule`  中,你使用了静态的 `RouterModule.` **`forRoot` **方法来注册路由和全应用级服务提供商。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在特性模块中,你要改用**`forChild` **静态方法。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Only call `RouterModule.forRoot()`  in the root `AppRoutingModule` 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								(or the `AppModule`  if that's where you register top level application routes).
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In any other module, you must call the ** `RouterModule.forChild` ** method to register additional routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								只在根模块 `AppRoutingModule`  中调用 `RouterModule.forRoot()` (如果在 `AppModule`  中注册应用的顶级路由,那就在 `AppModule`  中调用)。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在其它模块中,你就必须调用**`RouterModule.forChild` **方法来注册附属路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The updated `HeroesRoutingModule`  looks like this:
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								修改后的 `HeroesRoutingModule`  是这样的:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/heroes-routing.module.1.ts"  header = "src/app/heroes/heroes-routing.module.ts" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Consider giving each feature module its own route configuration file.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It may seem like overkill early when the feature routes are simple.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But routes have a tendency to grow more complex and consistency in patterns pays off over time.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								考虑让每个特性模块都有自己的路由配置文件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								在特性路由非常简单的早期阶段它看起来可能有点过度设计,但是,路由很容易变得更复杂,随着时间的推移,保持一致的模式会让你得到回报。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  remove-duplicate-hero-routes}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Remove duplicate hero routes
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 移除重复的“英雄管理”路由
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The hero routes are currently defined in _two_  places: in the `HeroesRoutingModule` ,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								by way of the `HeroesModule` , and in the `AppRoutingModule` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								英雄类的路由目前定义在两个地方:`HeroesRoutingModule`  中(并最终给 `HeroesModule` )和 `AppRoutingModule`  中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Routes provided by feature modules are combined together into their imported module's routes by the router.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This allows you to continue defining the feature module routes without modifying the main route configuration.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								由特性模块提供的路由会被路由器再组合上它们所导入的模块的路由。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这让你可以继续定义特性路由模块中的路由,而不用修改主路由配置。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Remove the `HeroListComponent`  import and the `/heroes`  route from the `app-routing.module.ts` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								移除 `HeroListComponent`  的导入和来自 `app-routing.module.ts`  中的 `/heroes`  路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								**Leave the default and the wildcard routes!**
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								These are concerns at the top level of the application itself.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**保留默认路由和通配符路由!**
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它们是应用程序顶层该自己处理的关注点。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.2.ts"  header = "src/app/app-routing.module.ts (v2)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  merge-hero-routes}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Remove heroes declarations
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 移除英雄列表的声明
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Remove the `HeroListComponent`  from the `AppModule` 's `declarations`  because it's now provided by the `HeroesModule` . You can evolve the hero feature with more components and different routes. That's a key benefit of creating a separate module for each feature area.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								从 `AppModule`  的 `declarations`  中移除 `HeroListComponent` ,因为它现在已经改由 `HeroesModule`  提供了。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以让“英雄”特性独立演化,添加更多的组件或各种各样的路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这就是为每个特性区创建独立模块后获得的核心优势。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								After these steps, the `AppModule`  should look like this:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								经过这些步骤,`AppModule`  变成了这样:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:02:52 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.3.ts"  header = "src/app/app.module.ts"  region = "remove-heroes" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  routing-module-order}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Module import order matters
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 导入模块的顺序很重要
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Look at the module `imports`  array. Notice that the `AppRoutingModule`  is _last_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Most importantly, it comes _after_  the `HeroesModule` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								看看该模块的 `imports`  数组。注意,`AppRoutingModule`  是*最后一个*。最重要的是,它位于 `HeroesModule`  之后。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.3.ts"  region = "module-imports"  header = "src/app/app.module.ts (module-imports)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The order of route configuration matters.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router accepts the first route that matches a navigation request path.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由配置的顺序很重要。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								路由器会接受第一个匹配上导航所要求的路径的那个路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								When all routes were in one `AppRoutingModule` ,
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								you put the default and [wildcard ](#wildcard ) routes last, after the `/heroes`  route,
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								so that the router had a chance to match a URL to the `/heroes`  route _before_ 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								hitting the wildcard route and navigating to "Page not found".
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当所有路由都在同一个 `AppRoutingModule`  时,你要把默认路由和[通配符路由 ](guide/router#wildcard )放在最后(这里是在 `/heroes`  路由后面),
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这样路由器才有机会匹配到 `/heroes`  路由,否则它就会先遇到并匹配上该通配符路由,并导航到“页面未找到”路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The routes are no longer in one file.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								They are distributed across two modules, `AppRoutingModule`  and `HeroesRoutingModule` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这些路由不再位于单一文件中。他们分布在两个不同的模块中:`AppRoutingModule`  和 `HeroesRoutingModule` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Each routing module augments the route configuration _in the order of import_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If you list `AppRoutingModule`  first, the wildcard route will be registered
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								_before_ the hero routes.
							 
						 
					
						
							
								
									
										
										
										
											2018-05-10 13:55:06 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The wildcard route— which matches _every_  URL— will intercept the attempt to navigate to a hero route.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								每个路由模块都会根据*导入的顺序*把自己的路由配置追加进去。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果你先列出了 `AppRoutingModule` ,那么通配符路由就会被注册在“英雄管理”路由*之前*。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								通配符路由(它匹配*任意*URL) , 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Reverse the routing modules and see for yourself that
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								a click of the heroes link results in "Page not found".
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Learn about inspecting the runtime router configuration
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								[below ](#inspect-config "Inspect the router config" ).
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								反转路由模块的导入顺序,你就会看到当点击英雄相关的链接时被导向了“页面未找到”路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								要学习如何在运行时查看路由器配置,参见[稍后的内容 ](guide/router#inspect-config "Inspect the router config" )。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Route Parameters
  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 路由参数
  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  route-def-with-parameter}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Route definition with a parameter
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 带参数的路由定义
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Return to the `HeroesRoutingModule`  and look at the route definitions again.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The route to `HeroDetailComponent`  has a twist.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								回到 `HeroesRoutingModule`  并再次检查这些路由定义。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`HeroDetailComponent`  的路由有点特殊。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/heroes-routing.module.1.ts"  header = "src/app/heroes/heroes-routing.module.ts (excerpt)"  region = "hero-detail-route" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Notice the `:id`  token in the path. That creates a slot in the path for a **Route Parameter** .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In this case, the router will insert the `id`  of a hero into that slot.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								注意路径中的 `:id`  令牌。它为*路由参数*在路径中创建一个“空位”。在这里,路由器把英雄的 `id`  插入到那个“空位”中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								If you tell the router to navigate to the detail component and display "Magneta",
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								you expect a hero id to appear in the browser URL like this:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								如果要告诉路由器导航到详情组件, , `id`  像这样显示在浏览器的 URL 中:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  format = "nocode" >  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  localhost:4200/hero/15
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If a user enters that URL into the browser address bar, the router should recognize the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								pattern and go to the same "Magneta" detail view.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								如果用户把此 URL 输入到浏览器的地址栏中, , 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "callout is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-24 11:16:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< header > Route parameter: Required or optional?< / header >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-24 11:16:33 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< header > 路由参数:必须的还是可选的?< / header >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Embedding the route parameter token, `:id` ,
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								in the route definition path is a good choice for this scenario
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								because the `id`  is *required*  by the `HeroDetailComponent`  and because
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the value `15`  in the path clearly distinguishes the route to "Magneta" from
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								a route for some other hero.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								在这个场景下,把路由参数的令牌 `:id`  嵌入到路由定义的 `path`  中是一个好主意,因为对于 `HeroDetailComponent`  来说 `id`  是*必须的*, 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								而且路径中的值 `15`  已经足够把到“Magneta”的路由和到其它英雄的路由明确区分开。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  route-parameters}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Setting the route parameters in the list view
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 在列表视图中设置路由参数
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								After navigating to the `HeroDetailComponent` , you expect to see the details of the selected hero.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You need *two*  pieces of information: the routing path to the component and the hero's `id` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								然后导航到 `HeroDetailComponent`  组件。在那里,你期望看到所选英雄的详情,这需要两部分信息:导航目标和该英雄的 `id` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Accordingly, the _link parameters array_  has *two*  items:  the routing _path_  and a _route parameter_  that specifies the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`id`  of the selected hero. 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								因此,这个*链接参数数组*中有两个条目:目标路由的**`path` (路径)**,和一个用来指定所选英雄 `id`  的**路由参数**。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-list/hero-list.component.1.html"  header = "src/app/heroes/hero-list/hero-list.component.html (link-parameters-array)"  region = "link-parameters-array" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router composes the destination URL from the array like this:
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`localhost:4200/hero/15` . 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								路由器从该数组中组合出了目标 URL: 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`localhost:3000/hero/15` 。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								How does the target `HeroDetailComponent`  learn about that `id` ?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Don't analyze the URL. Let the router do it.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								目标组件 `HeroDetailComponent`  该怎么知道这个 `id`  参数呢?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								当然不会是自己去分析 URL 了!那是路由器的工作。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router extracts the route parameter (`id:15` ) from the URL and supplies it to
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the `HeroDetailComponent`  via the `ActivatedRoute`  service.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:15:36 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器从 URL 中解析出路由参数(`id:15` ),并通过 **ActivatedRoute**  服务来把它提供给 `HeroDetailComponent`  组件。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  activated-route}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### _Activated Route_ in action
  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-01 22:28:13 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### _Activated Route_ 实战
  
						 
					
						
							
								
									
										
										
										
											2017-08-04 14:06:15 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Import the `Router` , `ActivatedRoute` , and `ParamMap`  tokens from the router package.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								从路由器(`router` )包中导入 `Router` 、`ActivatedRoute`  和 `Params`  类。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-detail/hero-detail.component.1.ts"  header = "src/app/heroes/hero-detail/hero-detail.component.ts (activated route)"  region = "imports" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Import the `switchMap`  operator because you need it later to process the `Observable`  route parameters.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这里导入 `switchMap`  操作符是因为你稍后将会处理路由参数的可观察对象 `Observable` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-detail/hero-detail.component.3.ts"  header = "src/app/heroes/hero-detail/hero-detail.component.ts (switchMap operator import)"  region = "rxjs-operator-import" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  hero-detail-ctor}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								As usual, you write a constructor that asks Angular to inject services
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								that the component requires and reference them as private variables.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								通常,你会直接写一个构造函数,让 Angular 把组件所需的服务注入进来,自动定义同名的私有变量,并把它们存进去。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-detail/hero-detail.component.3.ts"  header = "src/app/heroes/hero-detail/hero-detail.component.ts (constructor)"  region = "ctor" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Later, in the `ngOnInit`  method, you use the `ActivatedRoute`  service to retrieve the parameters for the route,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								pull the hero `id`  from the parameters and retrieve the hero to display.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								然后,在 `ngOnInit`  方法中,你用 `ActivatedRoute`  服务来接收路由的参数,从参数中取得该英雄的 `id` ,并接收此英雄用于显示。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-detail/hero-detail.component.3.ts"  header = "src/app/heroes/hero-detail/hero-detail.component.ts (ngOnInit)"  region = "ngOnInit" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `paramMap`  processing is a bit tricky. When the map changes, you `get()` 
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								the `id`  parameter from the changed parameters.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-14 09:13:52 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`paramMap`  的处理过程有点稍复杂。当这个 map 的值变化时,你可以从变化之后的参数中 `get()`  到其 `id`  参数。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Then you tell the `HeroService`  to fetch the hero with that `id`  and return the result of the `HeroService`  request.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-14 09:13:52 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								然后,让 `HeroService`  去获取一个具有此 `id`  的英雄,并返回这个 `HeroService`  请求的结果。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You might think to use the RxJS `map`  operator.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But the `HeroService`  returns an `Observable<Hero>` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								So you flatten the `Observable`  with the `switchMap`  operator instead.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可能想使用 RxJS 的 `map`  操作符。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								但 `HeroService`  返回的是一个 `Observable<Hero>` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								所以你要改用 `switchMap`  操作符来打平这个 `Observable` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `switchMap`  operator also cancels previous in-flight requests. If the user re-navigates to this route
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								with a new `id`  while the `HeroService`  is still retrieving the old `id` , `switchMap`  discards that old request and returns the hero for the new `id` .
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`switchMap`  操作符还会取消以前未完成的在途请求。如果用户使用新的 `id`  再次导航到该路由,而 `HeroService`  仍在接受老 `id`  对应的英雄,那么 `switchMap`  就会抛弃老的请求,并返回这个新 `id`  的英雄信息。 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The observable `Subscription`  will be handled by the `AsyncPipe`  and the component's `hero`  property will be (re)set with the retrieved hero.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这个可观察对象的 `Subscription` (订阅)将会由 `AsyncPipe`  处理,并且组件的 `hero`  属性将会设置为刚刚接收到的这个英雄。
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### _ParamMap_ API
  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-27 11:42:27 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `ParamMap`  API is inspired by the [URLSearchParams interface ](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams ). It provides methods
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								to handle parameter access for both route parameters (`paramMap` ) and query parameters (`queryParamMap` ).
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`ParamMap`  API 是参照[URLSearchParams 接口 ](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )来设计的。它提供了一些方法来处理对路由参数(`paramMap` )和查询参数(`queryParamMap` )中的参数访问。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< table >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < th > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Member
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      成员
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / th > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < th > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      Description
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 14:35:57 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      说明
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / th > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > has(name)< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    Returns `true`  if the parameter name is in the map of parameters.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    如果参数名位于参数列表中,就返回 `true`  。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > get(name)< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    Returns the parameter name value (a `string` ) if present, or `null`  if the parameter name is not in the map. Returns the _first_  element if the parameter value is actually an array of values.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    如果这个 map 中有参数名对应的参数值(字符串),就返回它,否则返回 `null` 。如果参数值实际上是一个数组,就返回它的*第一个*元素。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > getAll(name)< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    Returns a `string array`  of the parameter name value if found, or an empty `array`  if the parameter name value is not in the map. Use `getAll`  when a single parameter could have multiple values.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    如果这个 map 中有参数名对应的值,就返回一个字符串数组,否则返回空数组。当一个参数名可能对应多个值的时候,请使用 `getAll` 。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < tr > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < code > keys< / code > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < td > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    Returns a `string array`  of all parameter names in the map.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    返回这个 map 中的所有参数名组成的字符串数组。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / td > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / tr > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / table >  
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  reuse}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Observable <i>paramMap</i> and component reuse
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								#### <i>参数</i>的可观察对象( )   
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In this example, you retrieve the route parameter map from an `Observable` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								That implies that the route parameter map can change during the lifetime of this component.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在这个例子中,你接收了路由参数的 `Observable`  对象。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这种写法暗示着这些路由参数在该组件的生存期内可能会变化。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								They might. By default, the router re-uses a component instance when it re-navigates to the same component type
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								without visiting a different component first. The route parameters could change each time.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								确实如此!默认情况下,如果它没有访问过其它组件就导航到了同一个组件实例,那么路由器倾向于复用组件实例。如果复用,这些参数可以变化。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Suppose a parent component navigation bar had "forward" and "back" buttons
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								that scrolled through the list of heroes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Each click navigated imperatively to the `HeroDetailComponent`  with the next or previous `id` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								假设父组件的导航栏有“前进”和“后退”按钮,用来轮流显示英雄列表中中英雄的详情。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  每次点击都会强制导航到带前一个或后一个 `id`  的 `HeroDetailComponent`  组件。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You don't want the router to remove the current `HeroDetailComponent`  instance from the DOM only to re-create it for the next `id` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								That could be visibly jarring.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Better to simply re-use the same component instance and update the parameter.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你不希望路由器仅仅从 DOM 中移除当前的 `HeroDetailComponent`  实例,并且用下一个 `id`  重新创建它。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  那可能导致界面抖动。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  更好的方式是复用同一个组件实例,并更新这些参数。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Unfortunately, `ngOnInit`  is only called once per component instantiation.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You need a way to detect when the route parameters change from _within the same instance_ .
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The observable `paramMap`  property handles that beautifully.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								不幸的是,`ngOnInit`  对每个实例只调用一次。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:24:05 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  你需要一种方式来检测*在同一个实例中*路由参数什么时候发生了变化。
							 
						 
					
						
							
								
									
										
										
										
											2018-08-23 21:51:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								  而 `params`  属性这个可观察对象( ) 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当在组件中订阅一个可观察对象时,你通常总是要在组件销毁时取消这个订阅。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								There are a few exceptional observables where this is not necessary.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `ActivatedRoute`  observables are among the exceptions.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								但是也有少数例外情况不需要取消订阅。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`ActivateRoute`  中的各种可观察对象就是属于这种情况。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `ActivatedRoute`  and its observables are insulated from the `Router`  itself.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `Router`  destroys a routed component when it is no longer needed and the injected `ActivatedRoute`  dies with it.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`ActivateRoute`  及其可观察对象都是由 `Router`  本身负责管理的。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`Router`  会在不再需要时销毁这个路由组件,而注入进去的 `ActivateRoute`  也随之销毁了。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Feel free to unsubscribe anyway. It is harmless and never a bad practice.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								不过,你仍然可以随意取消订阅,这不会造成任何损害,而且也不是一项坏的实践。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  snapshot}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### _Snapshot_: the _no-observable_ alternative
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### *Snapshot*(快照):当不需要 Observable 时的替代品
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								_This_ application won't re-use the `HeroDetailComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The user always returns to the hero list to select another hero to view.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								There's no way to navigate from one hero detail to another hero detail
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								without visiting the list component in between.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Therefore, the router creates a new `HeroDetailComponent`  instance every time.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本应用不需要复用 `HeroDetailComponent` 。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  用户总是会先返回英雄列表,再选择另一位英雄。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  所以,不存在从一个英雄详情导航到另一个而不用经过英雄列表的情况。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  这意味着路由器每次都会创建一个全新的 `HeroDetailComponent`  实例。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When you know for certain that a `HeroDetailComponent`  instance will *never, never, ever* 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								be re-used, you can simplify the code with the *snapshot* .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								假如你很确定这个 `HeroDetailComponent`  组件的实例*永远、永远*不会被复用,那就可以使用*快照*来简化这段代码。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `route.snapshot`  provides the initial value of the route parameter map.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can access the parameters directly without subscribing or adding observable operators.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It's much simpler to write and read:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`route.snapshot`  提供了路由参数的初始值。 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以通过它来直接访问参数,而不用订阅或者添加 Observable 的操作符。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这样在读写时就会更简单:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-detail/hero-detail.component.2.ts"  header = "src/app/heroes/hero-detail/hero-detail.component.ts (ngOnInit snapshot)"  region = "snapshot" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**Remember:** you only get the _initial_  value of the parameter map with this technique.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Stick with the observable `paramMap`  approach if there's even a chance that the router
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								could re-use the component.
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This sample stays with the observable `paramMap`  strategy just in case.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:24:05 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**记住:**,用这种技巧,你只得到了这些参数的*初始*值。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果有可能连续多次导航到此组件,那么就该用 `paramMap`  可观察对象的方式。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这个例子中仍然使用了 `paramMap`  的可观察对象策略。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  nav-to-list}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Navigating back to the list component
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 导航回列表组件
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `HeroDetailComponent`  has a "Back" button wired to its `gotoHeroes`  method that navigates imperatively
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								back to the `HeroListComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								`HeroDetailComponent`  组件有一个“Back”按钮, `gotoHeroes`  方法,该方法会导航回 `HeroListComponent`  组件。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router `navigate`  method takes the same one-item _link parameters array_ 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								that you can bind to a `[routerLink]`  directive.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It holds the _path to the `HeroListComponent`_ :
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由的 `navigate`  方法同样接受一个单条目的*链接参数数组*,你也可以把它绑定到 `[routerLink]`  指令上。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								它保存着**到 `HeroListComponent`  组件的路径**: 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-detail/hero-detail.component.1.ts"  header = "src/app/heroes/hero-detail/hero-detail.component.ts (excerpt)"  region = "gotoHeroes" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-30 22:10:32 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  optional-route-parameters}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Route Parameters: Required or optional?
  
						 
					
						
							
								
									
										
										
										
											2018-03-01 22:19:59 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 路由参数:必须还是可选?
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Use [*route parameters* ](#route-parameters ) to specify a *required*  parameter value *within*  the route URL
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								as you do when navigating to the `HeroDetailComponent`  in order to view the hero with *id*  15:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果想导航到 `HeroDetailComponent`  以对 id 为 15 的英雄进行查看并编辑,就要在路由的 URL 中使用[*路由参数* ](guide/router#route-parameters )来指定*必要*参数值。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  format = "nocode" >  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  localhost:4200/hero/15
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can also add *optional*  information to a route request.
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								For example, when returning to the hero-detail.component.ts list from the hero detail view,
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								it would be nice if the viewed hero was preselected in the list.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你也能在路由请求中添加*可选*信息。
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								比如,当从 hero-detail.component.ts 返回到列表时,如果能自动选中刚刚查看过的英雄就好了。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/selected-hero.png'  alt = "Selected hero" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You'll implement this feature in a moment by including the viewed hero's `id` 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								in the URL as an optional parameter when returning from the `HeroDetailComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当从 `HeroDetailComponent`  返回时,你很快就会通过把正在查看的英雄的 `id`  作为可选参数包含在 URL 中来实现这个特性。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Optional information takes other forms. Search criteria are often loosely structured, e.g., `name='wind*'` .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Multiple values are common— `after='12/31/2015' & before='1/1/2017'` — in no
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								particular order— `before='1/1/2017' & after='12/31/2015'` —  in a
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								variety of formats— `during='currentYear'` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								可选信息有很多种形式。搜索条件通常就不是严格结构化的,比如 `name='wind*'` ;有多个值也很常见,如 `after='12/31/2015'&before='1/1/2017'` ; 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								而且顺序无关,如 `before='1/1/2017'&after='12/31/2015'` ,还可能有很多种变体格式,如 `during='currentYear'` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								These kinds of parameters don't fit easily in a URL *path* . Even if you could define a suitable URL token scheme,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								doing so greatly complicates the pattern matching required to translate an incoming URL to a named route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这么多种参数要放在 URL 的*路径*中可不容易。即使你能制定出一个合适的 URL 方案,实现起来也太复杂了,得通过模式匹配才能把 URL 翻译成命名路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Optional parameters are the ideal vehicle for conveying arbitrarily complex information during navigation.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Optional parameters aren't involved in pattern matching and afford flexibility of expression.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								可选参数是在导航期间传送任意复杂信息的理想载体。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								可选参数不涉及到模式匹配并在表达上提供了巨大的灵活性。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router supports navigation with optional parameters as well as required route parameters.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Define _optional_  parameters in a separate object _after_  you define the required route parameters.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								和必要参数一样,路由器也支持通过可选参数导航。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在你定义完必要参数之后,再通过一个*独立的对象*来定义*可选参数*。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In general, prefer a *required route parameter*  when
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the value is mandatory (for example, if necessary to distinguish one route path from another);
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								prefer an *optional parameter*  when the value is optional, complex, and/or multivariate.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								通常,对于强制性的值(比如用于区分两个路由路径的)使用*必备参数*;当这个值是可选的、复杂的或多值的时,使用可选参数。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  optionally-selecting}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Heroes list: optionally selecting a hero
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 英雄列表:选定一个英雄(也可不选)
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When navigating to the `HeroDetailComponent`  you specified the _required_  `id`  of the hero-to-edit in the
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*route parameter* and made it the second item of the [_link parameters array_ ](#link-parameters-array ).
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当导航到 `HeroDetailComponent`  时,你可以在*路由参数*中指定一个所要编辑的英雄 `id` ,只要把它作为[链接参数数组 ](guide/router#link-parameters-array )中的第二个条目就可以了。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-list/hero-list.component.1.html"  header = "src/app/heroes/hero-list/hero-list.component.html (link-parameters-array)"  region = "link-parameters-array" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router embedded the `id`  value in the navigation URL because you had defined it
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								as a route parameter with an `:id`  placeholder token in the route `path` :
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器在导航 URL 中内嵌了 `id`  的值,这是因为你把它用一个 `:id`  占位符当做路由参数定义在了路由的 `path`  中:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/heroes-routing.module.1.ts"  header = "src/app/heroes/heroes-routing.module.ts (hero-detail-route)"  region = "hero-detail-route" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When the user clicks the back button, the `HeroDetailComponent`  constructs another _link parameters array_ 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								which it uses to navigate back to the `HeroListComponent` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当用户点击后退按钮时,`HeroDetailComponent`  构造了另一个*链接参数数组*,可以用它导航回 `HeroListComponent` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-detail/hero-detail.component.1.ts"  header = "src/app/heroes/hero-detail/hero-detail.component.ts (gotoHeroes)"  region = "gotoHeroes" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This array lacks a route parameter because you had no reason to send information to the `HeroListComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								该数组缺少一个路由参数,这是因为你那时没有理由往 `HeroListComponent`  发送信息。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Now you have a reason. You'd like to send the id of the current hero with the navigation request so that the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`HeroListComponent`  can highlight that hero in its list. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This is a _nice-to-have_  feature; the list will display perfectly well without it.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								但现在有了。你要在导航请求中同时发送当前英雄的 id, `HeroListComponent`  可以在列表中高亮这个英雄。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  这是一个*有更好,没有也无所谓*的特性,就算没有它,列表照样能显示得很完美。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Send the `id`  with an object that contains an _optional_  `id`  parameter.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								For demonstration purposes, there's an extra junk parameter (`foo` ) in the object that the `HeroListComponent`  should ignore.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Here's the revised navigation statement:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								传送一个包含*可选*`id`  参数的对象。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								为了演示,这里还在对象中定义了一个没用的额外参数(`foo` ) , `HeroListComponent`  应该忽略它。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								下面是修改过的导航语句:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-detail/hero-detail.component.3.ts"  header = "src/app/heroes/hero-detail/hero-detail.component.ts (go to heroes)"  region = "gotoHeroes" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The application still works. Clicking "back" returns to the hero list view.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								该应用仍然能工作。点击“back”按钮返回英雄列表视图。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Look at the browser address bar.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								注意浏览器的地址栏。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It should look something like this, depending on where you run it:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它应该是这样的,不过也取决于你在哪里运行它:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "bash" >  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  localhost:4200/heroes;id=15;foo=foo
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `id`  value appears in the URL as (`;id=15;foo=foo` ), not in the URL path.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The path for the "Heroes" route doesn't have an `:id`  token.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`id`  的值像这样出现在 URL 中(`;id=15;foo=foo` ),但不在 URL 的路径部分。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								“Heroes”路由的路径部分并没有定义 `:id` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The optional route parameters are not separated by "?" and "& " as they would be in the URL query string.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								They are **separated by semicolons ";"** 
							 
						 
					
						
							
								
									
										
										
										
											2018-05-10 13:55:06 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This is *matrix URL*  notation— something you may not have seen before.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								可选的路由参数没有使用“?”和“& ”符号分隔,因为它们将用在 URL 查询字符串中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它们是**用“;”分隔的**。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这是*矩阵 URL*标记法 —— 你以前可能从未见过。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*Matrix URL* notation is an idea first introduced
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								in a [1996 proposal ](http://www.w3.org/DesignIssues/MatrixURIs.html ) by the founder of the web, Tim Berners-Lee.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								*Matrix URL*写法首次提出是在[1996 提案 ](http://www.w3.org/DesignIssues/MatrixURIs.html )中,提出者是 Web 的奠基人: 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Although matrix notation never made it into the HTML standard, it is legal and
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								it became popular among browser routing systems as a way to isolate parameters
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								belonging to parent and child routes. The Router is such a system and provides
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								support for the matrix notation across browsers.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								虽然 Matrix 写法未曾进入过 HTML 标准, , 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The syntax may seem strange to you but users are unlikely to notice or care
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								as long as the URL can be emailed and pasted into a browser address bar
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								as this one can.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这种语法对你来说可能有点奇怪,不过用户不会在意这一点,因为该 URL 可以正常的通过邮件发出去或粘贴到浏览器的地址栏中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  route-parameters-activated-route}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Route parameters in the *ActivatedRoute* service
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:15:36 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### *ActivatedRoute* 服务中的路由参数
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The list of heroes is unchanged. No hero row is highlighted.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								英雄列表仍没有改变,没有哪个英雄列被加亮显示。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The < live-example ></ live-example >  *does*  highlight the selected
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								row because it demonstrates the final state of the application which includes the steps you're *about*  to cover.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								At the moment this guide is describing the state of affairs *prior*  to those steps.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< live-example > < / live-example > *高亮了*选中的行,因为它演示的是应用的最终状态,因此包含了你*即将*接触到的步骤。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								此刻,本文描述的仍是那些步骤*之前*的状态。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `HeroListComponent`  isn't expecting any parameters at all and wouldn't know what to do with them.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can change that.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`HeroListComponent`  还完全不需要任何参数,也不知道该怎么处理它们。你可以改变这一点。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Previously, when navigating from the `HeroListComponent`  to the `HeroDetailComponent` ,
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								you subscribed to the route parameter map `Observable`  and made it available to the `HeroDetailComponent` 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								in the `ActivatedRoute`  service.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You injected that service in the constructor of the `HeroDetailComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								以前,当从 `HeroListComponent`  导航到 `HeroDetailComponent`  时,你通过 `ActivatedRoute`  服务订阅了路由参数这个 `Observable` ,并让它能用在 `HeroDetailComponent`  中。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								你把该服务注入到了 `HeroDetailComponent`  的构造函数中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This time you'll be navigating in the opposite direction, from the `HeroDetailComponent`  to the `HeroListComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这次,你要进行反向导航,从 `HeroDetailComponent`  到 `HeroListComponent` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								First you extend the router import statement to include the `ActivatedRoute`  service symbol:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								首先,你扩展该路由的导入语句,以包含进 `ActivatedRoute`  服务的类;
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-list/hero-list.component.ts"  header = "src/app/heroes/hero-list/hero-list.component.ts (import)"  region = "import-router" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Import the `switchMap`  operator to perform an operation on the `Observable`  of route parameter map.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								导入 `switchMap`  操作符,在路由参数的 `Observable`  对象上执行操作。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-list/hero-list.component.ts"  header = "src/app/heroes/hero-list/hero-list.component.ts (rxjs imports)"  region = "rxjs-imports" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Then you inject the `ActivatedRoute`  in the `HeroListComponent`  constructor.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								接着,你注入 `ActivatedRoute`  到 `HeroListComponent`  的构造函数中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-list/hero-list.component.ts"  header = "src/app/heroes/hero-list/hero-list.component.ts (constructor and ngOnInit)"  region = "ctor" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `ActivatedRoute.paramMap`  property is an `Observable`  map of route parameters. The `paramMap`  emits a new map of values that includes `id` 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								when the user navigates to the component. In `ngOnInit`  you subscribe to those values, set the `selectedId` , and get the heroes.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								ActivatedRoute.paramMap 属性是一个路由参数的可观察对象。当用户导航到这个组件时, `id` 。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								在 ngOnInit 中,你订阅了这些值,设置到 selectedId, 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Update the template with a [class binding ](guide/template-syntax#class-binding ).
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The binding adds the `selected`  CSS class when the comparison returns `true`  and removes it when `false` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Look for it within the repeated `<li>`  tag as shown here:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-23 09:48:55 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								用 [CSS 类绑定 ](guide/template-syntax#class-binding )更新模板,把它绑定到 `isSelected`  方法上。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果该方法返回 `true` ,此绑定就会添加 CSS 类 `selected` ,否则就移除它。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								在 `<li>`  标记中找到它,就像这样:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-list/hero-list.component.html"  header = "src/app/heroes/hero-list/hero-list.component.html" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Add some styles to apply when the list item is selected.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当选中列表条目时,要添加一些样式。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-list/hero-list.component.css"  region = "selected"  header = "src/app/heroes/hero-list/hero-list.component.css" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When the user navigates from the heroes list to the "Magneta" hero and back, "Magneta" appears selected:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-30 20:04:18 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								当用户从英雄列表导航到英雄“Magneta”并返回时, : 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/selected-hero.png'  alt = "Selected List" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The optional `foo`  route parameter is harmless and continues to be ignored.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这儿可选的 `foo`  路由参数人畜无害,并继续被忽略。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Adding routable animations
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 添加路由动画
  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  route-animation}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Adding animations to the routed component
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 为路由组件添加动画
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The heroes feature module is almost complete, but what is a feature without some smooth transitions?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这个“英雄”特性模块就要完成了,但这个特性还没有平滑的转场效果。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-09 22:21:04 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This section shows you how to add some [animations ](guide/animations ) to the `HeroDetailComponent` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在这一节,你将为*英雄详情*组件添加一些[动画 ](guide/animations )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								First import the `BrowserAnimationsModule`  and add it to the `imports`  array:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								首先导入 `BrowserAnimationsModule` ,并添加到 `imports`  数组中:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.ts"  header = "src/app/app.module.ts (animations-module)"  region = "animations-module" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-09 22:21:04 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Next, add a `data`  object to the routes for `HeroListComponent`  and `HeroDetailComponent` . Transitions are based on `states`  and you'll use the `animation`  data from the route to provide a named animation `state`  for the transitions.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								接下来,为指向 `HeroListComponent`  和 `HeroDetailComponent`  的路由定义添加一个 `data`  对象。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								转场是基于 `states`  的,你将使用来自路由的 `animation`  数据为转场提供一个有名字的动画 `state` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/heroes-routing.module.2.ts"  header = "src/app/heroes/heroes-routing.module.ts (animation data)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Create an `animations.ts`  file in the root `src/app/`  folder. The contents look like this:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在根目录 `src/app/`  下创建一个 `animations.ts` 。内容如下:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/animations.ts"  header = "src/app/animations.ts (excerpt)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This file does the following:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								该文件做了如下工作:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Imports the animation symbols that build the animation triggers, control state, and manage transitions between states. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   导入动画符号以构建动画触发器、控制状态并管理状态之间的过渡。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-09 22:21:04 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Exports a constant named `slideInAnimation`  set to an animation trigger named *`routeAnimation`* ; 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   导出了一个名叫 `slideInAnimation`  的常量,并把它设置为一个名叫*`routeAnimation`  的动画触发器。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-09 22:21:04 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Defines one *transition*  when switching back and forth from the `heroes`  and `hero`  routes to ease the component in from the left of the screen as it enters the application view (`:enter` ), the other to animate the component to the right as it leaves the application view (`:leave` ). 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  定义一个*转场动画*,当在 `heroes`  和 `hero`  路由之间来回切换时,如果进入(`:enter` )应用视图则让组件从屏幕的左侧滑入,如果离开(`:leave` )应用视图则让组件从右侧划出。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-09 22:21:04 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You could also create more transitions for other routes. This trigger is sufficient for the current milestone.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你还可以为其它路由组件用不同的转场效果创建更多触发器。现在这个触发器已经足够当前的里程碑用了。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Back in the `AppComponent` , import the `RouterOutlet`  token from the `@angular/router`  package and the `slideInAnimation`  from
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`'./animations.ts` . 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								回到 `AppComponent` ,从 `@angular/router`  中导入 `RouterOutlet`  令牌,并从 `'./animations.ts`  中导入 `slideInDownAnimation` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-02-11 10:42:37 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Add an `animations`  array to the `@Component`  metadata's that contains the `slideInAnimation` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把一个包含 `slideInDownAnimation`  的 `animations`  数组添加到 `@Component`  的元数据中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.2.ts"  header = "src/app/app.component.ts (animations)"  region = "animation-imports" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-09 22:21:04 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In order to use the routable animations, you'll need to wrap the `RouterOutlet`  inside an element. You'll
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								use the `@routeAnimation`  trigger and bind it to the element.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								为了使用路由动画,你需要把 `RouterOutlet`  包装到一个元素中。你要把 `@routeAnimation`  触发器绑定到该元素上。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-09 22:21:04 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								For the `@routeAnimation`  transitions to key off states, you'll need to provide it with the `data`  from the `ActivatedRoute` . The `RouterOutlet`  is exposed as an `outlet`  template variable, so you bind a reference to the router outlet. A variable of `routerOutlet`  is an ideal choice.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								为了把 `@routeAnimation`  转场转场到指定的状态,你需要从 `ActivatedRoute`  的 `data`  中提供它。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`RouterOutlet`  导出成了一个模板变量 `outlet` ,这样你就可以绑定一个到路由出口的引用了。给这个变量取名做 `routerOutlet`  是一个理想的选择。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.2.html"  header = "src/app/app.component.html (router outlet)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-05-01 21:19:02 +09:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `@routeAnimation`  property is bound to the `getAnimationData`  with the provided `routerOutlet`  reference, so you'll need to define that function in the `AppComponent` . The `getAnimationData`  function returns the animation property from the `data`  provided through the `ActivatedRoute` . The `animation`  property matches the `transition`  names you used in the `slideInAnimation`  defined in `animations.ts` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`@routeAnimation`  属性使用所提供的 `routerOutlet`  引用来绑定到 `getAnimationData` ,因此你需要在 `AppComponent`  中定义那个函数。`getAnimationData`  函数会根据 `ActivatedRoute`  所提供的 `data`  对象返回动画的属性。`animation`  属性会根据你在 `animations.ts`  中定义 `slideInAnimation`  时使用的 `transition`  名称进行匹配。 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.2.ts"  header = "src/app/app.component.ts (router outlet)"  region = "function-binding" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-09 22:21:04 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								When switching between the two routes, the `HeroDetailComponent`  and `HeroListComponent`  will ease in from the left when routed to and will slide to the right when navigating away.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果在两个路由之间切换,导航进来时,`HeroDetailComponent`  和 `HeroListComponent`  会从左侧滑入;导航离开时将会从右侧划出。
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  milestone-3-wrap-up}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Milestone 3 wrap up
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-17 18:26:55 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 里程碑 3 的总结
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You've learned how to do the following:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你学到了如何:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Organize the app into *feature areas* . 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								   把应用组织成*特性区*
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Navigate imperatively from one component to another. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   命令式的从一个组件导航到另一个
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Pass information along in route parameters and subscribe to them in the component. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   通过路由参数传递信息,并在组件中订阅它们
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Import the feature area NgModule into the `AppModule` . 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把这个特性分区模块导入根模块 `AppModule` 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-09 22:21:04 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Applying routable animations based on the page. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把动画应用到路由组件上
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								After these changes, the folder structure looks like this:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								做完这些修改之后,目录结构是这样的:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = 'filetree' >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    angular-router-sample
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      src
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      app
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        crisis-list
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              crisis-list.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              crisis-list.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              crisis-list.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          heroes
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								hero-detail
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								                hero-detail.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								                hero-detail.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								              < div  class = 'file' >             hero-detail.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								hero-list
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								                hero-list.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								                hero-list.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								              < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								              < div  class = 'file' >             hero-list.component.ts
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								            hero.service.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            hero.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								            heroes-routing.module.ts
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								            heroes.module.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								            mock-heroes.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          page-not-found
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								            page-not-found.component.css
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								            page-not-found.component.html
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								            page-not-found.component.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        animations.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        app.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        app.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          app.component.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          app.module.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          app-routing.module.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          main.ts
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        message.service.ts
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        index.html
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        styles.css
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        tsconfig.json
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      node_modules ...
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      package.json
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-05-09 22:01:04 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Here are the relevant files for this version of the sample application.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这里是当前版本的范例程序相关文件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "animations.ts"  path = "router/src/app/animations.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "app.component.html"  path = "router/src/app/app.component.2.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "app.component.ts"  path = "router/src/app/app.component.2.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "app.module.ts"  path = "router/src/app/app.module.3.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "app-routing.module.ts"  path = "router/src/app/app-routing.module.2.ts"  region = "milestone3" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "hero-list.component.css"  path = "router/src/app/heroes/hero-list/hero-list.component.css" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "hero-list.component.html"  path = "router/src/app/heroes/hero-list/hero-list.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "hero-list.component.ts"  path = "router/src/app/heroes/hero-list/hero-list.component.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "hero-detail.component.html"  path = "router/src/app/heroes/hero-detail/hero-detail.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "hero-detail.component.ts"  path = "router/src/app/heroes/hero-detail/hero-detail.component.3.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "hero.service.ts"  path = "router/src/app/heroes/hero.service.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "heroes.module.ts"  path = "router/src/app/heroes/heroes.module.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "heroes-routing.module.ts"  path = "router/src/app/heroes/heroes-routing.module.2.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "message.service.ts"  path = "router/src/app/message.service.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  milestone-4}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## Milestone 4: Crisis center feature
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-17 18:26:55 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								## 里程碑 4:   
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It's time to add real features to the app's current placeholder crisis center.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								是时候往该应用的危机中心(现在是占位符)中添加一些真实的特性了。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Begin by imitating the heroes feature:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								先从模仿“英雄管理”中的特性开始:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Create a `crisis-center`  subfolder in the `src/app`  folder. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  在 `src/app`  目录下创建一个 `crisis-center`  子目录。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Copy the files and folders from `app/heroes`  into the new `crisis-center`  folder. 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把 `app/heroes`  中的文件和目录复制到新的 `crisis-center`  文件夹中。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  In the new files, change every mention of "hero" to "crisis", and "heroes" to "crises". 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  在这些新建的文件中,把每个 "hero" 都改成 "crisis",每个 "heroes" 都改成 "crises"。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Rename the NgModule files to `crisis-center.module.ts`  and `crisis-center-routing.module.ts` . 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-20 09:24:49 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  把这些 NgModule 文件改名为 `crisis-center.module.ts`  和 `crisis-center-routing.module.ts` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You'll use mock crises instead of mock heroes:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你还要用模拟的危机列表替换模拟的英雄列表:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/mock-crises.ts"  header = "src/app/crisis-center/mock-crises.ts" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The resulting crisis center is a foundation for introducing a new concept— **child routing**.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can leave *Heroes*  in its current state as a contrast with the *Crisis Center* 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and decide later if the differences are worthwhile.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								最终的危机中心可以作为引入**子路由**这个新概念的基础。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以把*英雄管理*保持在当前状态,以便和*危机中心*进行对比,以后再根据这些差异是否有价值来决定后续行动。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In keeping with the
							 
						 
					
						
							
								
									
										
										
										
											2017-04-24 20:23:45 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< a  href = "https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html"  title = "Separation of Concerns" > *Separation of Concerns* principle< / a > , 
						 
					
						
							
								
									
										
										
										
											2017-03-31 12:23:16 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								changes to the *Crisis Center*  won't affect the `AppModule`  or
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								any other feature's component.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								遵循< a  href = "https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html"  target = "_blank"  title = "Separation of Concerns" > *关注点分离( ) < / a > , 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								对*危机中心*的修改不会影响 `AppModule`  或其它特性模块中的组件。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  crisis-child-routes}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### A crisis center with child routes
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 带有子路由的危机中心
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This section shows you how to organize the crisis center
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								to conform to the following recommended pattern for Angular applications:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本节会展示如何组织危机中心,来满足 Angular 应用所推荐的模式:
							 
						 
					
						
							
								
									
										
										
										
											2018-03-01 22:19:59 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Each feature area resides in its own folder. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								   把每个特性放在自己的目录中。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-01 22:19:59 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Each feature has its own Angular feature module. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   每个特性都有自己的 Angular 特性模块。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Each area has its own area root component. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   每个特性区都有自己的根组件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Each area root component has its own router outlet and child routes. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   每个特性区的根组件中都有自己的路由出口及其子路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Feature area routes rarely (if ever) cross with routes of other features. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   特性区的路由很少(或完全不)与其它特性区的路由交叉。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If your app had many feature areas, the app component trees might look like this:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果你还有更多特性区,它们的组件树是这样的:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/component-tree.png'  alt = "Component Tree" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  child-routing-component}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Child routing component
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 子路由组件
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Generate a `CrisisCenter`  component in the `crisis-center`  folder:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `crisis-center`  目录下生成一个 `CrisisCenter`  组件:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component crisis-center/crisis-center
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Update the component template to look like this:
							 
						 
					
						
							
								
									
										
										
										
											2017-08-04 07:39:15 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把组件模板修改成这样:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-center/crisis-center.component.html"  header = "src/app/crisis-center/crisis-center/crisis-center.component.html" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `CrisisCenterComponent`  has the following in common with the `AppComponent` :
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`CrisisCenterComponent`  和 `AppComponent`  有下列共同点: 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  It is the *root*  of the crisis center area, 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								just as `AppComponent`  is the root of the entire application.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   它是危机中心特性区的*根*,正如 `AppComponent`  是整个应用的根。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  It is a *shell*  for the crisis management feature area, 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								just as the `AppComponent`  is a shell to manage the high-level workflow.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   它是危机管理特性区的*壳*,正如 `AppComponent`  是管理高层工作流的壳。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Like most shells, the `CrisisCenterComponent`  class is very simple, simpler even than `AppComponent` :
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								it has no business logic, and its template has no links, just a title and
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`<router-outlet>`  for the crisis center child component. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								就像大多数的壳一样,`CrisisCenterComponent`  类也非常简单,甚至比 `AppComponent`  更简单:
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它没有业务逻辑,它的模板中没有链接,只有一个标题和用于放置危机中心的子组件的 `<router-outlet>` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  child-route-config}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Child route configuration
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 子路由配置
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								As a host page for the "Crisis Center" feature, generate a `CrisisCenterHome`  component in the `crisis-center`  folder.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `crisis-center`  目录下生成一个 `CrisisCenterHome`  组件,作为 "危机中心" 特性的宿主页面。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component crisis-center/crisis-center-home
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Update the template with a welcome message to the `Crisis Center` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								用一条欢迎信息修改 `Crisis Center`  中的模板。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-22 11:19:24 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.html"  header = "src/app/crisis-center/crisis-center-home/crisis-center-home.component.html" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Update the `crisis-center-routing.module.ts`  you renamed after copying it from `heroes-routing.module.ts`  file.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This time, you define **child routes**  *within*  the parent `crisis-center`  route.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把 `heroes-routing.module.ts`  文件复制过来,改名为 `crisis-center-routing.module.ts` ,并修改它。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这次你要把**子路由**定义在父路由 `crisis-center`  中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-center-routing.module.1.ts"  header = "src/app/crisis-center/crisis-center-routing.module.ts (Routes)"  region = "routes" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Notice that the parent `crisis-center`  route has a `children`  property
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								with a single route containing the `CrisisListComponent` . The `CrisisListComponent`  route
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								also has a `children`  array with two routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								注意,父路由 `crisis-center`  有一个 `children`  属性,它有一个包含 `CrisisListComponent`  的路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`CrisisListModule`  路由还有一个带两个路由的 `children`  数组。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								These two routes navigate to the crisis center child components,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`CrisisCenterHomeComponent`  and `CrisisDetailComponent` , respectively. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这两个路由导航到了*危机中心*的两个子组件:`CrisisCenterHomeComponent`  和 `CrisisDetailComponent` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								There are *important differences*  in the way the router treats these _child routes_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								对这些路由的处理中有一些*重要的不同*。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router displays the components of these routes in the `RouterOutlet` 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								of the `CrisisCenterComponent` , not in the `RouterOutlet`  of the `AppComponent`  shell.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器会把这些路由对应的组件放在 `CrisisCenterComponent`  的 `RouterOutlet`  中,而不是 `AppComponent`  壳组件中的。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `CrisisListComponent`  contains the crisis list and a `RouterOutlet`  to
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								display the `Crisis Center Home`  and `Crisis Detail`  route components.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`CrisisListComponent`  包含危机列表和一个 `RouterOutlet` ,用以显示 `Crisis Center Home`  和 `Crisis Detail`  这两个路由组件。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `Crisis Detail`  route is a child of the `Crisis List` . The router [reuses components ](#reuse )
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								by default, so the `Crisis Detail`  component will be re-used as you select different crises.
							 
						 
					
						
							
								
									
										
										
										
											2019-05-01 21:19:02 +09:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In contrast, back in the `Hero Detail`  route, [the component was recreated ](#snapshot-the-no-observable-alternative ) each time you selected a different hero from the list of heroes.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`Crisis Detail`  路由是 `Crisis List`  的子路由。由于路由器默认会[复用组件 ](#reuse ),因此当你选择了另一个危机时,`CrisisDetailComponent`  会被复用。   
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								作为对比,回头看看 `Hero Detail`  路由,每当你从列表中选择了不同的英雄时,[都会重新创建该组件 ](#snapshot-the-no-observable-alternative )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								At the top level, paths that begin with `/`  refer to the root of the application.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But child routes *extend*  the path of the parent route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								With each step down the route tree,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								you add a slash followed by the route path, unless the path is _empty_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在顶级,以 `/`  开头的路径指向的总是应用的根。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								但这里是子路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它们是在父路由路径的基础上做出的扩展。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在路由树中每深入一步,你就会在该路由的路径上添加一个斜线 `/` (除非该路由的路径是*空的*)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Apply that logic to navigation within the crisis center for which the parent path is `/crisis-center` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果把该逻辑应用到危机中心中的导航,那么父路径就是 `/crisis-center` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  To navigate to the `CrisisCenterHomeComponent` , the full URL is `/crisis-center`  (`/crisis-center`  + `''`  + `''` ). 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   要导航到 `CrisisCenterHomeComponent` ,完整的 URL 是 `/crisis-center`  (`/crisis-center`  + `''`  + `''` )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  To navigate to the `CrisisDetailComponent`  for a crisis with `id=2` , the full URL is 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`/crisis-center/2`  (`/crisis-center`  + `''`  +  `'/2'` ). 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   要导航到 `CrisisDetailComponent`  以展示 `id=2`  的危机,完整的 URL 是 `/crisis-center/2`  (`/crisis-center`  + `''`  + `'/2'` )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The absolute URL for the latter example, including the `localhost`  origin, is
							 
						 
					
						
							
								
									
										
										
										
											2017-03-30 20:04:18 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								本例子中包含站点部分的绝对 URL, : 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example >  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  localhost:4200/crisis-center/2
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Here's the complete `crisis-center-routing.module.ts`  file with its imports.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这里是完整的 `crisis-center.routing.ts`  及其导入语句。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-center-routing.module.1.ts"  header = "src/app/crisis-center/crisis-center-routing.module.ts (excerpt)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  import-crisis-module}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Import crisis center module into the *AppModule* routes
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 把危机中心模块导入到 `AppModule` 的路由中
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								As with the `HeroesModule` , you must add the `CrisisCenterModule`  to the `imports`  array of the `AppModule` 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								_before_ the `AppRoutingModule` :
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								就像 `HeroesModule`  模块中一样,你必须把 `CrisisCenterModule`  添加到 `AppModule`  的 `imports`  数组中,就在 `AppRoutingModule`  前面:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  path = "router/src/app/crisis-center/crisis-center.module.ts" header = "src/app/crisis-center/crisis-center.module.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  path = "router/src/app/app.module.4.ts"  header = "src/app/app.module.ts (import CrisisCenterModule)"  region = "crisis-center-module" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Remove the initial crisis center route from the `app-routing.module.ts` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The feature routes are now provided by the `HeroesModule`  and the `CrisisCenter`  modules.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								从 `app.routing.ts`  中移除危机中心的初始路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这些特性路由现在是由 `HeroesModule`  和 `CrisisCenter`  特性模块提供的。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `app-routing.module.ts`  file retains the top-level application routes such as the default and wildcard routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`app-routing.module.ts`  文件中只有应用的顶级路由,比如默认路由和通配符路由。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.3.ts"  header = "src/app/app-routing.module.ts (v3)"  region = "v3" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  relative-navigation}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Relative navigation
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 相对导航
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								While building out the crisis center feature, you navigated to the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								crisis detail route using an **absolute path**  that begins with a _slash_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								虽然构建出了危机中心特性区,你却仍在使用以斜杠开头的**绝对路径**来导航到危机详情的路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router matches such _absolute_  paths to routes starting from the top of the route configuration.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器会从路由配置的顶层来匹配像这样的*绝对路径*。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You could continue to use absolute paths like this to navigate inside the *Crisis Center* 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								feature, but that pins the links to the parent routing structure.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If you changed the parent `/crisis-center`  path, you would have to change the link parameters array.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你固然可以继续像*危机中心*特性区一样使用绝对路径,但是那样会把链接钉死在特定的父路由结构上。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果你修改了父路径 `/crisis-center` ,那就不得不修改每一个链接参数数组。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can free the links from this dependency by defining paths that are **relative**  to the current URL segment.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Navigation _within_  the feature area remains intact even if you change the parent route path to the feature.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								通过改成定义*相对于*当前 URL 的路径,你可以把链接从这种依赖中解放出来。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								当你修改了该特性区的父路由路径时,该特性区*内部*的导航仍然完好无损。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Here's an example:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								例子如下:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router supports directory-like syntax in a _link parameters list_  to help guide route name lookup:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器支持在*链接参数数组*中使用“目录式”语法来为查询路由名提供帮助:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`./`  or `no leading slash`  is relative to the current level. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`./`  或 ` 无前导斜线 `  形式是相对于当前级别的。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`../`  to go up one level in the route path. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`../`  会回到当前路由路径的上一级。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You can combine relative navigation syntax with an ancestor path.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If you must navigate to a sibling route, you could use the `../<sibling>`  convention to go up
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								one level, then over and down the sibling route path.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以把相对导航语法和一个祖先路径组合起来用。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果不得不导航到一个兄弟路由,你可以用 `../<sibling>`  来回到上一级,然后进入兄弟路由路径中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								To navigate a relative path with the `Router.navigate`  method, you must supply the `ActivatedRoute` 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								to give the router knowledge of where you are in the current route tree.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								用 `Router.navigate`  方法导航到相对路径时,你必须提供当前的 `ActivatedRoute` ,来让路由器知道你现在位于路由树中的什么位置。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								After the _link parameters array_ , add an object with a `relativeTo`  property set to the `ActivatedRoute` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router then calculates the target URL based on the active route's location.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-19 10:27:39 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在*链接参数数组*后面,添加一个带有 `relativeTo`  属性的对象,并把它设置为当前的 `ActivatedRoute` 。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这样路由器就会基于当前激活路由的位置来计算出目标 URL。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								**Always** specify the complete _absolute_  path when calling router's `navigateByUrl`  method.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当调用路由器的 `navigateByUrl`  时,**总是**要指定完整的*绝对路径*。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  nav-to-crisis}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Navigate to crisis list with a relative URL
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 使用相对 URL 导航到危机列表
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You've already injected the `ActivatedRoute`  that you need to compose the relative navigation path.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你已经注入过了 `ActivatedRoute` ,你需要把它来和相对导航路径组合在一起。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								When using a `RouterLink`  to navigate instead of the `Router`  service, you'd use the _same_ 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								link parameters array, but you wouldn't provide the object with the `relativeTo`  property.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `ActivatedRoute`  is implicit in a `RouterLink`  directive.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果用 `RouterLink`  来代替 `Router`  服务进行导航,就要使用*相同*的链接参数数组,不过不再需要提供 `relativeTo`  属性。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`ActivatedRoute`  已经隐含在了 `RouterLink`  指令中。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Update the `gotoCrises`  method of the `CrisisDetailComponent`  to navigate back to the *Crisis Center*  list using relative path navigation.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								修改 `CrisisDetailComponent`  的 `gotoCrises`  方法,来使用相对路径返回*危机中心*列表。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts"  header = "src/app/crisis-center/crisis-detail/crisis-detail.component.ts (relative navigation)"  region = "gotoCrises-navigate" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Notice that the path goes up a level using the `../`  syntax.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If the current crisis `id`  is `3` , the resulting path back to the crisis list is  `/crisis-center/;id=3;foo=foo` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								注意这个路径使用了 `../`  语法返回上一级。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果当前危机的 `id`  是 `3` ,那么最终返回到的路径就是 `/crisis-center/;id=3;foo=foo` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  named-outlets}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Displaying multiple routes in named outlets
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								### 用命名出口( )   
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You decide to give users a way to contact the crisis center.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								When a user clicks a "Contact" button, you want to display a message in a popup view.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你决定给用户提供一种方式来联系危机中心。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								当用户点击“Contact”按钮时, 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The popup should stay open, even when switching between pages in the application, until the user closes it
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								by sending the message or canceling.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Clearly you can't put the popup in the same outlet as the other pages.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								即使在应用中的不同页面之间切换,这个弹出框也应该始终保持打开状态,直到用户发送了消息或者手动取消。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								显然,你不能把这个弹出框跟其它放到页面放到同一个路由出口中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Until now, you've defined a single outlet and you've nested child routes
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								under that outlet to group routes together.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router only supports one primary _unnamed_  outlet per template.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								迄今为止,你只定义过单路由出口,并且在其中嵌套了子路由以便对路由分组。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在每个模板中,路由器只能支持一个*无名*主路由出口。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								A template can also have any number of _named_  outlets.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Each named outlet has its own set of routes with their own components.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Multiple outlets can be displaying different content, determined by different routes, all at the same time.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								模板还可以有多个*命名的*路由出口。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								每个命名出口都自己有一组带组件的路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								多重出口可以在同一时间根据不同的路由来显示不同的内容。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Add an outlet named "popup" in the `AppComponent` , directly below the unnamed outlet.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								在 `AppComponent`  中添加一个名叫“popup”的出口, 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.4.html"  header = "src/app/app.component.html (outlets)"  region = "outlets" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								That's where a popup will go, once you learn how to route a popup component to it.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								一旦你学会了如何把一个弹出框组件路由到该出口,那里就是将会出现弹出框的地方。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  secondary-routes}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### Secondary routes
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 第二路由
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Named outlets are the targets of  _secondary routes_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								命名出口是*第二路由*的目标。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Secondary routes look like primary routes and you configure them the same way.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								They differ in a few key respects.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								第二路由很像主路由,配置方式也一样。它们只有一些关键的不同点:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  They are independent of each other. 
						 
					
						
							
								
									
										
										
										
											2018-03-01 22:19:59 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   它们彼此互不依赖。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  They work in combination with other routes. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								   它们与其它路由组合使用。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-01 22:19:59 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  They are displayed in named outlets. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   它们显示在命名出口中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Generate a new component to compose the message.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								生成一个新的组件来组合这个消息。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component compose-message
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It displays a simple form with a header, an input box for the message,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and two buttons, "Send" and "Cancel".
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								它显示一个简单的表单, : 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "lightbox" >  
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < img  src = 'generated/images/guide/router/contact-popup.png'  alt = "Contact popup" > 
							 
						 
					
						
							
								
									
										
										
										
											2019-11-11 14:47:51 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Here's the component, its template and styles:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								下面是该组件及其模板和样式:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/compose-message/compose-message.component.css"  path = "router/src/app/compose-message/compose-message.component.css" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/compose-message/compose-message.component.html"  path = "router/src/app/compose-message/compose-message.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/compose-message/compose-message.component.ts"  path = "router/src/app/compose-message/compose-message.component.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It looks about the same as any other component you've seen in this guide.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								There are two noteworthy differences.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它看起来几乎和你以前见过其它组件一样,但有两个值得注意的区别。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Note that the `send()`  method simulates latency by waiting a second before "sending" the message and closing the popup.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-02-02 02:29:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								注意,`send()`  方法在发送消息和关闭弹出框之前通过等待模拟了一秒钟的延迟。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `closePopup()`  method closes the popup view by navigating to the popup outlet with a `null` .
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								That's a peculiarity covered [below ](#clear-secondary-routes ).
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`closePopup()`  方法用把 `popup`  出口导航到 `null`  的方式关闭了弹出框。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这个奇怪的用法在[稍后的部分 ](guide/router#clear-secondary-routes )有讲解。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  add-secondary-route}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### Add a secondary route
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 添加第二路由
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Open the `AppRoutingModule`  and add a new `compose`  route to the `appRoutes` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								打开 `AppRoutingModule` ,并把一个新的 `compose`  路由添加到 `appRoutes`  中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.3.ts"  header = "src/app/app-routing.module.ts (compose route)"  region = "compose" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `path`  and `component`  properties should be familiar.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								There's a new property, `outlet` , set to `'popup'` .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This route now targets the popup outlet and the `ComposeMessageComponent`  will display there.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								对 `path`  和 `component`  属性应该很熟悉了吧。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								注意这个新的属性 `outlet`  被设置成了 `'popup'` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这个路由现在指向了 `popup`  出口,而 `ComposeMessageComponent`  也将显示在那里。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The user needs a way to open the popup.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Open the `AppComponent`  and add a "Contact" link.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								用户需要某种途径来打开这个弹出框。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								打开 `AppComponent` , 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.4.html"  header = "src/app/app.component.html (contact-link)"  region = "contact-link" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Although the `compose`  route is pinned to the "popup" outlet, that's not sufficient for wiring the route to a `RouterLink`  directive.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You have to specify the named outlet in a _link parameters array_  and bind it to the `RouterLink`  with a property binding.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								虽然 `compose`  路由被钉死在了 `popup`  出口上,但这仍然不足以向 `RouterLink`  指令表明要加载该路由。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你还要在*链接参数数组*中指定这个命名出口,并通过属性绑定的形式把它绑定到 `RouterLink`  上。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The _link parameters array_  contains an object with a single `outlets`  property whose value
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								is another object keyed by one (or more) outlet names.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In this case there is only the "popup" outlet property and its value is another _link parameters array_  that specifies the `compose`  route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*链接参数数组*包含一个只有一个 `outlets`  属性的对象,它的值是另一个对象,这个对象以一个或多个路由的出口名作为属性名。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								在这里, , `compose`  路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You are in effect saying, _when the user clicks this link, display the component associated with the `compose` route in the `popup` outlet_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								意思是,当用户点击此链接时,在路由出口 `popup`  中显示与 `compose`  路由相关联的组件。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This `outlets`  object within an outer object was completely unnecessary
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								when there was only one route and one _unnamed_  outlet to think about.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-02-02 02:29:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当只需要考虑一个路由和一个*无名*出口时,外部对象中的这个 `outlets`  对象是完全不必要的。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router assumed that your route specification targeted the _unnamed_  primary outlet
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and created these objects for you.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器假设这个路由指向了*无名*的主出口,并为你创建这些对象。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Routing to a named outlet has revealed a previously hidden router truth:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								you can target multiple outlets with multiple routes in the same `RouterLink`  directive.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由到一个命名出口就会揭示一个以前被隐藏的真相:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								你可以在同一个 `RouterLink`  指令中为多个路由出口指定多个路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You're not actually doing that here.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But to target a named outlet, you must use the richer, more verbose syntax.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这里你实际上没能这样做。要想指向命名出口,你就得使用一种更强大也更啰嗦的语法。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  secondary-route-navigation}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Secondary route navigation: merging routes during navigation
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### 第二路由导航:在导航期间合并路由
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Navigate to the _Crisis Center_  and click "Contact".
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								you should see something like the following URL in the browser address bar.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								导航到*危机中心*并点击“Contact”, : 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  http://.../crisis-center(popup:compose)
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The interesting part of the URL follows the `...` :
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这个 URL 中有意思的部分是 `...`  后面的这些:
							 
						 
					
						
							
								
									
										
										
										
											2018-02-28 13:43:40 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  The `crisis-center`  is the primary navigation. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   `crisis-center`  是主导航。
							 
						 
					
						
							
								
									
										
										
										
											2018-02-28 13:43:40 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Parentheses surround the secondary route. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   圆括号包裹的部分是第二路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  The secondary route consists of an outlet name (`popup` ), a `colon`  separator, and the secondary route path (`compose` ). 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   第二路由包括一个出口名称(`popup` )、一个冒号分隔符和第二路由的路径(`compose` )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Click the _Heroes_  link and look at the URL again.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:15:36 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								点击 *Heroes*  链接,并再次查看 URL: 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  http://.../heroes(popup:compose)
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The primary navigation part has changed; the secondary route is the same.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								主导航的部分变化了,而第二路由没有变。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router is keeping track of two separate branches in a navigation tree and generating a representation of that tree in the URL.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器在导航树中对两个独立的分支保持追踪,并在 URL 中对这棵树进行表达。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can add many more outlets and routes, at the top level and in nested levels, creating a navigation tree with many branches.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router will generate the URL to go with it.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你还可以添加更多出口和更多路由(无论是在顶层还是在嵌套的子层)来创建一个带有多个分支的导航树。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器将会生成相应的 URL。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can tell the router to navigate an entire tree at once by filling out the `outlets`  object mentioned above.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Then pass that object inside a _link parameters array_   to the `router.navigate`  method.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								通过像前面那样填充 `outlets`  对象,你可以告诉路由器立即导航到一棵完整的树。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								然后把这个对象通过一个*链接参数数组*传给 `router.navigate`  方法。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Experiment with these possibilities at your leisure.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								有空的时候你可以自行试验这些可能性。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  clear-secondary-routes}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### Clearing secondary routes
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### 清除第二路由
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								As you've learned, a component in an outlet persists until you navigate away to a new component.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Secondary outlets are no different in this regard.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								正如你刚刚学到的,除非导航到新的组件,否则路由出口中的组件会始终存在。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这里涉及到的第二出口也同样如此。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Each secondary outlet has its own navigation, independent of the navigation driving the primary outlet.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Changing a current route that displays in the primary outlet has no effect on the popup outlet.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								That's why the popup stays visible as you navigate among the crises and heroes.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								每个第二出口都有自己独立的导航,跟主出口的导航彼此独立。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								修改主出口中的当前路由并不会影响到 `popup`  出口中的。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这就是为什么在危机中心和英雄管理之间导航时,弹出框始终都是可见的。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Clicking the "send" or "cancel" buttons _does_  clear the popup view.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								To see how, look at the `closePopup()`  method again:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								点击“send”或“cancel”按钮, 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								为何如此?再看看 `closePopup()`  方法:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/compose-message/compose-message.component.ts"  header = "src/app/compose-message/compose-message.component.ts (closePopup)"  region = "closePopup" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								It navigates imperatively with the `Router.navigate()`  method, passing in a [link parameters array ](#link-parameters-array ).
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它使用 `Router.navigate()`  方法进行强制导航,并传入了一个[链接参数数组 ](guide/router#link-parameters-array )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Like the array bound to the _Contact_  `RouterLink`  in the `AppComponent` ,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								this one includes an object with an `outlets`  property.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `outlets`  property value is another object with outlet names for keys.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The only named outlet is `'popup'` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:15:36 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								就像在 `AppComponent`  中绑定到的 *Contact*  `RouterLink`  一样,它也包含了一个带 `outlets`  属性的对象。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`outlets`  属性的值是另一个对象,该对象用一些出口名称作为属性名。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								唯一的命名出口是 `'popup'` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This time, the value of `'popup'`  is `null` . That's not a route, but it is a legitimate value.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Setting the popup `RouterOutlet`  to `null`  clears the outlet and removes
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								the secondary popup route from the current URL.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								但这次,`'popup'`  的值是 `null` 。`null`  不是一个路由,但却是一个合法的值。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								把 `popup`  这个 `RouterOutlet`  设置为 `null`  会清除该出口,并且从当前 URL 中移除第二路由 `popup` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-30 22:10:32 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  guards}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## Milestone 5: Route guards
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								## 里程碑 5:   
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								At the moment, *any*  user can navigate *anywhere*  in the application *anytime* .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								That's not always the right thing to do.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现在,*任何用户*都能在*任何时候*导航到*任何地方*。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								但有时候这样是不对的。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Perhaps the user is not authorized to navigate to the target component. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   该用户可能无权导航到目标组件。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Maybe the user must login (*authenticate*) first. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   可能用户得先登录(认证)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Maybe you should fetch some data before you display the target component. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   在显示目标组件前,你可能得先获取某些数据。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  You might want to save pending changes before leaving a component. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   在离开组件前,你可能要先保存修改。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  You might ask the user if it's OK to discard pending changes rather than save them. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   你可能要询问用户:你是否要放弃本次更改,而不用保存它们?
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You add _guards_  to the route configuration to handle these scenarios.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以往路由配置中添加***守卫***,来处理这些场景。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								A guard's return value controls the router's behavior:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								守卫返回一个值,以控制路由器的行为:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  If it returns `true` , the navigation process continues. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   如果它返回 `true` ,导航过程会继续
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  If it returns `false` , the navigation process stops and the user stays put. 
						 
					
						
							
								
									
										
										
										
											2019-01-04 15:43:45 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								   如果它返回 `false` ,导航过程就会终止,且用户留在原地。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-17 09:30:45 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  If it returns a `UrlTree` , the current navigation cancels and a new navigation is initiated to the `UrlTree`  returned. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-04 15:43:45 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  如果它返回 `UrlTree` ,则取消当前的导航,并且开始导航到返回的这个 `UrlTree` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-27 10:51:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-07 13:37:23 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**Note:** The guard can also tell the router to navigate elsewhere, effectively canceling the current navigation. When
							 
						 
					
						
							
								
									
										
										
										
											2018-10-17 09:30:45 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								doing so inside a guard, the guard should return `false` ;
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-26 23:44:04 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								**注意**:守卫还可以告诉路由器导航到别处,这样也会取消当前的导航。要想在守卫中这么做,就要返回 `false` ; 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The guard *might*  return its boolean answer synchronously.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But in many cases, the guard can't produce an answer synchronously.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The guard could ask the user a question, save changes to the server, or fetch fresh data.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								These are all asynchronous operations.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								守卫*可以*用同步的方式返回一个布尔值。但在很多情况下,守卫无法用同步的方式给出答案。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								守卫可能会向用户问一个问题、把更改保存到服务器,或者获取新数据,而这些都是异步操作。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Accordingly, a routing guard can return an `Observable<boolean>`  or a `Promise<boolean>`  and the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								router will wait for the observable to resolve to `true`  or `false` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								因此,路由的守卫可以返回一个 `Observable<boolean>`  或 `Promise<boolean>` ,并且路由器会等待这个可观察对象被解析为 `true`  或 `false` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-critical" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								**Note:** The observable provided to the Router _must_  also complete. If the observable does not complete, the navigation will not continue.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								**注意:** 提供给路由器的可观察对象还*必须*能结束( ) , 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router supports multiple guard interfaces:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-14 09:13:52 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器可以支持多种守卫接口:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  [`CanActivate` ](api/router/CanActivate ) to mediate navigation *to*  a route. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   用[`CanActivate` ](api/router/CanActivate )来处理导航*到*某路由的情况。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  [`CanActivateChild` ](api/router/CanActivateChild ) to mediate navigation *to*  a child route. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   用[`CanActivateChild` ](api/router/CanActivateChild )来处理导航*到*某子路由的情况。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  [`CanDeactivate` ](api/router/CanDeactivate ) to mediate navigation *away*  from the current route. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   用[`CanDeactivate` ](api/router/CanDeactivate )来处理从当前路由*离开*的情况.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  [`Resolve` ](api/router/Resolve ) to perform route data retrieval *before*  route activation. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   用[`Resolve` ](api/router/Resolve )在路由激活*之前*获取路由数据。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  [`CanLoad` ](api/router/CanLoad ) to mediate navigation *to*  a feature module loaded _asynchronously_ . 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-30 00:03:22 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   用[`CanLoad` ](api/router/CanLoad )来处理*异步*导航到某特性模块的情况。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can have multiple guards at every level of a routing hierarchy.
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router checks the `CanDeactivate`  and `CanActivateChild`  guards first, from the deepest child route to the top.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Then it checks the `CanActivate`  guards from the top down to the deepest child route. If the feature module
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								is loaded asynchronously, the `CanLoad`  guard is checked before the module is loaded.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If _any_  guard returns false, pending guards that have not completed will be canceled,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and the entire navigation is canceled.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在分层路由的每个级别上,你都可以设置多个守卫。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器会先按照从最深的子路由由下往上检查的顺序来检查 `CanDeactivate()`  和 `CanActivateChild()`  守卫。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								然后它会按照从上到下的顺序检查 `CanActivate()`  守卫。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果特性模块是异步加载的,在加载它之前还会检查 `CanLoad()`  守卫。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果*任何*一个守卫返回 `false` ,其它尚未完成的守卫会被取消,这样整个导航就被取消了。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								There are several examples over the next few sections.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								接下来的小节中有一些例子。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  can-activate-guard}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### _CanActivate_: requiring authentication
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### *CanActivate*: 要求认证
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Applications often restrict access to a feature area based on who the user is.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You could permit access only to authenticated users or to users with a specific role.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You might block or limit access until the user's account is activated.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								应用程序通常会根据访问者来决定是否授予某个特性区的访问权。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-23 09:43:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以只对已认证过的用户或具有特定角色的用户授予访问权,还可以阻止或限制用户访问权,直到用户账户激活为止。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `CanActivate`  guard is the tool to manage these navigation business rules.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`CanActivate`  守卫是一个管理这些导航类业务规则的工具。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### Add an admin feature module
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 添加一个“管理”特性模块
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In this next section, you'll extend the crisis center with some new *administrative*  features.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Those features aren't defined yet.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But you can start by adding a new feature module named `AdminModule` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在下一节,你将会使用一些新的*管理*特性来扩展危机中心。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								那些特性尚未定义,但是你可以先从添加一个名叫 `AdminModule`  的特性模块开始。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Generate an `admin`  folder with a feature module file and a routing configuration file.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								生成一个带有特性模块文件和路由配置文件的 `admin`  目录。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate module admin --routing
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Next, generate the supporting components.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								接下来,生成一些支持性组件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component admin/admin-dashboard
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component admin/admin
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component admin/manage-crises
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component admin/manage-heroes
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The admin feature file structure looks like this:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								管理特性区的文件是这样的:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = 'filetree' >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    src/app/admin
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2019-06-07 13:37:23 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      admin
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          admin.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          admin.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          admin.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      admin-dashboard
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          admin-dashboard.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          admin-dashboard.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-07 13:37:23 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          admin-dashboard.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      manage-crises
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2019-06-07 13:37:23 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								          manage-crises.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-07 13:37:23 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          manage-crises.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-07 13:37:23 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          manage-crises.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2019-06-07 13:37:23 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      manage-heroes
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < div  class = 'children' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          manage-heroes.component.css
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          manage-heroes.component.html
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < div  class = 'file' > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								          manage-heroes.component.ts
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								        < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      < / div > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      admin.module.ts
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < div  class = 'file' > 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								      admin-routing.module.ts
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								    < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / div > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-11 21:44:52 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The admin feature module contains the `AdminComponent`  used for routing within the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								feature module, a dashboard route and two unfinished components to manage crises and heroes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								管理特性模块包含 `AdminComponent` ,它用于在特性模块内的仪表盘路由以及两个尚未完成的用于管理危机和英雄的组件之间进行路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/admin/admin/admin.component.html"   path = "router/src/app/admin/admin/admin.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/admin/admin-dashboard/admin-dashboard.component.html"  path = "router/src/app/admin/admin-dashboard/admin-dashboard.component.1.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/admin/admin.module.ts"  path = "router/src/app/admin/admin.module.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/admin/manage-crises/manage-crises.component.html"  path = "router/src/app/admin/manage-crises/manage-crises.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/admin/manage-heroes/manage-heroes.component.html"   path = "router/src/app/admin/manage-heroes/manage-heroes.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Although the admin dashboard `RouterLink`  only contains a relative slash without an additional URL segment, it
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								is considered a match to any route within the admin feature area. You only want the `Dashboard`  link to be active when the user visits that route. Adding an additional binding to the `Dashboard`  routerLink,`[routerLinkActiveOptions]="{ exact: true }"` , marks the `./`  link as active when the user navigates to the `/admin`  URL and not when navigating to any of the child routes.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								虽然管理仪表盘中的 `RouterLink`  只包含一个没有其它 URL 段的斜杠 `/` ,但它能匹配管理特性区下的任何路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								但你只希望在访问 `Dashboard`  路由时才激活该链接。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								往 `Dashboard`  这个 routerLink 上添加另一个绑定 `[routerLinkActiveOptions]="{ exact: true }"` , 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这样就只有当用户导航到 `/admin`  这个 URL 时才会激活它,而不会在导航到它的某个子路由时。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  component-less-route}
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								##### Component-less route: grouping routes without a component
  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								##### 无组件路由:分组路由,而不需要组件
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The initial admin routing configuration:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								最初的管理路由配置如下:
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/admin/admin-routing.module.1.ts"  header = "src/app/admin/admin-routing.module.ts (admin routing)"  region = "admin-routes" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Looking at the child route under the `AdminComponent` , there is a `path`  and a `children` 
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								property but it's not using a `component` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You haven't made a mistake in the configuration.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You've defined a _component-less_  route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-23 09:43:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								来看 `AdminComponent`  下的子路由,这里有一个带 **path**  和 **children**  的子路由,
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:15:36 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								但它没有使用 **component** 。这并不是配置中的失误,而是在使用**无组件**路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The goal is to group the `Crisis Center`  management routes under the `admin`  path.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You don't need a component to do it.
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								A _component-less_  route makes it easier to [guard child routes ](#can-activate-child-guard ).
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这里的目标是对 `admin`  路径下的 ` 危机中心 `  管理类路由进行分组,但并不需要另一个仅用来分组路由的组件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								一个*无组件*的路由能让[守卫子路由 ](guide/router#can-activate-child-guard )变得更容易。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Next, import the `AdminModule`  into `app.module.ts`  and add it to the `imports`  array
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to register the admin routes.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								接下来,把 `AdminModule`  导入到 `app.module.ts`  中,并把它加入 `imports`  数组中来注册这些管理类路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.4.ts"  header = "src/app/app.module.ts (admin module)"  region = "admin-module" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Add an "Admin" link to the `AppComponent`  shell so that users can get to this feature.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								然后往壳组件 `AppComponent`  中添加一个链接,让用户能点击它,以访问该特性。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.5.html"  header = "src/app/app.component.html (template)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  guard-admin-feature}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### Guard the admin feature
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 守护“管理特性”区
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Currently every route within the *Crisis Center*  is open to everyone.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The new *admin*  feature should be accessible only to authenticated users.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现在“危机中心”的每个路由都是对所有人开放的。这些新的*管理特性*应该只能被已登录用户访问。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You could hide the link until the user logs in. But that's tricky and difficult to maintain.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以在用户登录之前隐藏这些链接,但这样会有点复杂并难以维护。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Instead you'll write a `canActivate()`  guard method to redirect anonymous users to the
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								login page when they try to enter the admin area.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以换种方式:写一个 `CanActivate()`  守卫,将正在尝试访问管理组件匿名用户重定向到登录页。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This is a general purpose guard— you can imagine other features
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								that require authenticated users— so you generate an
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`AuthGuard`  in the `auth`  folder. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这是一个通用的守卫(你可以假设另外一些特性区也要求已认证过的用户才能访问),所以你可以在 `auth`  目录下生成一个 `AuthGuard` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate guard auth/auth
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								At the moment you're interested in seeing how guards work so the first version does nothing useful.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It simply logs to console and `returns`  true immediately, allowing navigation to proceed:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								此刻,你的兴趣在于看看守卫是如何工作的,所以第一个版本没做什么有用的事情。它只是往控制台写日志,并且立即返回 `true` ,让导航继续:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/auth/auth.guard.1.ts"  header = "src/app/auth/auth.guard.ts (excerpt)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Next, open `admin-routing.module.ts ` , import the `AuthGuard`  class, and
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								update the admin route with a `canActivate`  guard property that references it:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-08-06 11:44:07 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								接下来,打开 `admin-routing.module.ts` ,导入 `AuthGuard`  类,修改管理路由并通过 `CanActivate()`  守卫来引用 `AuthGuard` : 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/admin/admin-routing.module.2.ts"  header = "src/app/admin/admin-routing.module.ts (guarded admin route)"  region = "admin-route" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-01 22:17:43 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The admin feature is now protected by the guard, albeit protected poorly.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								管理特性区现在受此守卫保护了,不过这样的保护还不够。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  teach-auth}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### Teach *AuthGuard* to authenticate
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:15:36 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 教 *AuthGuard* 进行认证
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Make the `AuthGuard`  at least pretend to authenticate.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								先让 `AuthGuard`  至少能“假装”进行认证。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-31 23:09:14 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `AuthGuard`  should call an application service that can login a user and retain information about the current user. Generate a new `AuthService`  in the `auth`  folder:
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								`AuthGuard`  可以调用应用中的一项服务,该服务能让用户登录,并且保存当前用户的信息。在 `admin`  目录下生成一个新的 `AuthService` :  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
									
										
										
										
											2018-12-31 23:09:14 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate service auth/auth
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Update the `AuthService`  to log in the user:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-04 15:43:45 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								修改 `AuthService`  以登入此用户:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/auth/auth.service.ts"  header = "src/app/auth/auth.service.ts (excerpt)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Although it doesn't actually log in, it has what you need for this discussion.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It has an `isLoggedIn`  flag to tell you whether the user is authenticated.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Its `login`  method simulates an API call to an external service by returning an
							 
						 
					
						
							
								
									
										
										
										
											2018-05-10 13:55:06 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								observable that resolves successfully after a short pause.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `redirectUrl`  property will store the attempted URL so you can navigate to it after authenticating.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								虽然它不会真的进行登录,但足够让你进行这个讨论了。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它有一个 `isLoggedIn`  标志,用来标识是否用户已经登录过了。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								它的 `login`  方法会仿真一个对外部服务的 API 调用, ( ) , 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`redirectUrl`  属性将会保存在 URL 中,以便认证完之后导航到它。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Revise the `AuthGuard`  to call it.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这就修改 `AuthGuard`  来调用它。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/auth/auth.guard.2.ts"  header = "src/app/auth/auth.guard.ts (v2)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Notice that you *inject*  the `AuthService`  and the `Router`  in the constructor.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You haven't provided the `AuthService`  yet but it's good to know that you can inject helpful services into routing guards.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								注意,你把 `AuthService`  和 `Router`  服务*注入到*构造函数中。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								你还没有提供 `AuthService` ,这里要说明的是:可以往路由守卫中注入有用的服务。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This guard returns a synchronous boolean result.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If the user is logged in, it returns true and the navigation continues.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								该守卫返回一个同步的布尔值。如果用户已经登录,它就返回 `true` ,导航会继续。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `ActivatedRouteSnapshot`  contains the _future_  route that will be activated and the `RouterStateSnapshot` 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								contains the _future_  `RouterState`  of the application, should you pass through the guard check.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:24:05 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这个 `ActivatedRouteSnapshot`  包含了*即将*被激活的路由,而 `RouterStateSnapshot`  包含了该应用*即将*到达的状态。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你应该通过守卫进行检查。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If the user is not logged in, you store the attempted URL the user came from using the `RouterStateSnapshot.url`  and
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								tell the router to navigate to a login page— a page you haven't created yet.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This secondary navigation automatically cancels the current navigation; `checkLogin()`  returns
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`false`  just to be clear about that. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果用户还没有登录,你就会用 `RouterStateSnapshot.url`  保存用户来自的 URL 并让路由器导航到登录页(你尚未创建该页)。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这间接导致路由器自动中止了这次导航,`checkLogin()`  返回 `false`  并不是必须的,但这样可以更清楚的表达意图。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  add-login-component}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### Add the *LoginComponent*
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:15:36 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 添加 *LoginComponent*
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You need a `LoginComponent`  for the user to log in to the app. After logging in, you'll redirect
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								to the stored URL if available, or use the default URL.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								There is nothing new about this component or the way you wire it into the router configuration.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								你需要一个 `LoginComponent`  来让用户登录进这个应用。在登录之后,你就会跳转到前面保存的 URL, , 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  该组件没有什么新内容,你把它放进路由配置的方式也没什么新意。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate component auth/login
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Register a `/login`  route in the `auth/auth-routing.module.ts` . In `app.module.ts` , import and add the `AuthModule`  to the `AppModule`  imports.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `auth/auth-routing.module.ts`  文件中注册一个 `/login`  路由。在 `app.module.ts`  中,导入 `AuthModule`  并且添加到 `AppModule`  的 `imports`  中。
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/app.module.ts"  path = "router/src/app/app.module.ts"  region = "auth" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/auth/login/login.component.html"  path = "router/src/app/auth/login/login.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/auth/login/login.component.ts"  path = "router/src/app/auth/login/login.component.1.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "src/app/auth/auth.module.ts"  path = "router/src/app/auth/auth.module.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  can-activate-child-guard}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### _CanActivateChild_: guarding child routes
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-12 13:04:24 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### `CanActivateChild`:保护子路由
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You can also protect child routes with the `CanActivateChild`  guard.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `CanActivateChild`  guard is similar to the `CanActivate`  guard.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The key difference is that it runs _before_   any child route is activated.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你还可以使用 `CanActivateChild`  守卫来保护子路由。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`CanActivateChild`  守卫和 `CanActivate`  守卫很像。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它们的区别在于,`CanActivateChild`  会在*任何子路由*被激活之前运行。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You protected the admin feature module from unauthorized access.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You should also protect child routes _within_  the feature module.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你要保护管理特性模块,防止它被非授权访问,还要保护这个特性模块*内部*的那些子路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Extend the `AuthGuard`  to protect when navigating between the `admin`  routes.
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Open `auth.guard.ts`  and add the `CanActivateChild`  interface to the imported tokens from the router package.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								扩展 `AuthGuard`  以便在 `admin`  路由之间导航时提供保护。
							 
						 
					
						
							
								
									
										
										
										
											2018-12-31 22:29:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								打开 `auth.guard.ts`  并从路由库中导入 `CanActivateChild`  接口。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Next, implement the `canActivateChild()`  method which takes the same arguments as the `canActivate()`  method:
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								an `ActivatedRouteSnapshot`  and `RouterStateSnapshot` .
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `canActivateChild()`  method can return an `Observable<boolean>`  or `Promise<boolean>`  for
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								async checks and a `boolean`  for sync checks.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This one returns a `boolean` :
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								接下来,实现 `CanActivateChild`  方法,它所接收的参数与 `CanActivate`  方法一样:一个 `ActivatedRouteSnapshot`  和一个 `RouterStateSnapshot` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`CanActivateChild`  方法可以返回 `Observable<boolean>`  或 `Promise<boolean>`  来支持异步检查,或 `boolean`  来支持同步检查。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								这里返回的是 `boolean` : 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/auth/auth.guard.3.ts"  header = "src/app/auth/auth.guard.ts (excerpt)"  region = "can-activate-child" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Add the same `AuthGuard`  to the `component-less`  admin route to protect all other child routes at one time
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								instead of adding the `AuthGuard`  to each route individually.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								同样把这个 `AuthGuard`  添加到“无组件的”管理路由,来同时保护它的所有子路由,而不是为每个路由单独添加这个 `AuthGuard` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/admin/admin-routing.module.3.ts"  header = "src/app/admin/admin-routing.module.ts (excerpt)"  region = "can-activate-child" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  can-deactivate-guard}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### _CanDeactivate_: handling unsaved changes
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### *CanDeactivate*:处理未保存的更改
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Back in the "Heroes" workflow, the app accepts every change to a hero immediately without hesitation or validation.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								回到“Heroes”工作流, , 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In the real world, you might have to accumulate the users changes.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You might have to validate across fields.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You might have to validate on the server.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You might have to hold changes in a pending state until the user confirms them *as a group*  or
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								cancels and reverts all changes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在现实世界中,你得先把用户的改动积累起来。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								你可能不得不进行跨字段的校验,可能要找服务器进行校验,可能得把这些改动保存成一种待定状态,直到用户或者把这些改动*作为一组*进行确认或撤销所有改动。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								What do you do about unapproved, unsaved changes when the user navigates away?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can't just leave and risk losing the user's changes; that would be a terrible experience.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当用户要导航到外面时,该怎么处理这些既没有审核通过又没有保存过的改动呢?
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  你不能马上离开,不在乎丢失这些改动的风险,那显然是一种糟糕的用户体验。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								It's better to pause and let the user decide what to do.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If the user cancels, you'll stay put and allow more changes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If the user approves, the app can save.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								最好能暂停,并让用户决定该怎么做。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-23 09:43:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果用户选择了取消,你就留下来,并允许更多改动。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果用户选择了确认,那就进行保存。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You still might delay navigation until the save succeeds.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If you let the user move to the next screen immediately and
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								the save were to fail (perhaps the data are ruled invalid), you would lose the context of the error.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在保存成功之前,你还可以继续推迟导航。如果你让用户立即移到下一个界面,而保存却失败了(可能因为数据不符合有效性规则),你就会丢失该错误的上下文环境。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You can't block while waiting for the server— that's not possible in a browser.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You need to stop the navigation while you wait, asynchronously, for the server
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to return with its answer.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在等待服务器的答复时,你没法阻塞它 —— 这在浏览器中是不可能的。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  你只能用异步的方式在等待服务器答复之前先停止导航。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You need the `CanDeactivate`  guard.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你需要 `CanDeactivate`  守卫。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  cancel-save}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Cancel and save
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 取消与保存
  
						 
					
						
							
								
									
										
										
										
											2017-08-04 14:06:15 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The sample application doesn't talk to a server.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Fortunately, you have another way to demonstrate an asynchronous router hook.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这个范例应用不会与服务器通讯。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								幸运的是,你有另一种方式来演示异步的路由器钩子。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Users update crisis information in the `CrisisDetailComponent` .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Unlike the `HeroDetailComponent` , the user changes do not update the crisis entity immediately.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Instead, the app updates the entity when the user presses the *Save*  button and
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								discards the changes when the user presses the *Cancel*  button.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								用户在 `CrisisDetailComponent`  中更新危机信息。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								与 `HeroDetailComponent`  不同,用户的改动不会立即更新危机的实体对象。当用户按下了 *Save*  按钮时,应用就更新这个实体对象;如果按了 *Cancel*  按钮,那就放弃这些更改。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Both buttons navigate back to the crisis list after save or cancel.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这两个按钮都会在保存或取消之后导航回危机列表。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts"  header = "src/app/crisis-center/crisis-detail/crisis-detail.component.ts (cancel and save methods)"  region = "cancel-save" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								What if the user tries to navigate away without saving or canceling?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The user could push the browser back button or click the heroes link.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Both actions trigger a navigation.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Should the app save or cancel automatically?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果用户尝试不保存或撤销就导航到外面该怎么办?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  用户可以按浏览器的后退按钮,或点击英雄的链接。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  这些操作都会触发导航。本应用应该自动保存或取消吗?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This demo does neither. Instead, it asks the user to make that choice explicitly
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								in a confirmation dialog box that *waits asynchronously for the user's
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								answer*.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								都不行。应用应该弹出一个确认对话框来要求用户明确做出选择,该对话框会*用异步的方式等用户做出选择*。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-27 10:51:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You could wait for the user's answer with synchronous, blocking code.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The app will be more responsive— and can do other work— by
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								waiting for the user's answer asynchronously. Waiting for the user asynchronously
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								is like waiting for the server asynchronously.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你也能用同步的方式等用户的答复,阻塞代码。但如果能用异步的方式等待用户的答复,应用就会响应性更好,也能同时做别的事。异步等待用户的答复和等待服务器的答复是类似的。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Generate a `Dialog`  service to handle user confirmation.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								生成一个 `Dialog`  服务,以处理用户的确认操作。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate service dialog
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Add a `confirm()`  method to the `DialogService`  to prompt the user to confirm their intent. The `window.confirm`  is a _blocking_  action that displays a modal dialog and waits for user interaction.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								为 `DialogService`  添加一个 `confirm()`  方法,以提醒用户确认。`window.confirm`  是一个*阻塞型*操作,它会显示一个模态对话框,并等待用户的交互。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/dialog.service.ts"  header = "src/app/dialog.service.ts" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								It returns an `Observable`  that *resolves*  when the user eventually decides what to do: either
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to discard changes and navigate away (`true` ) or to preserve the pending changes and stay in the crisis editor (`false` ).
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-24 14:46:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它返回*observable*,当用户最终决定了如何去做时,它就会被*解析* —— 或者决定放弃更改直接导航离开(`true` ),或者保留未完成的修改,留在危机编辑器中(`false` )。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  CanDeactivate}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Generate a _guard_  that checks for the presence of a `canDeactivate()`  method in a component— any component.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								生成一个*守卫( ) `canDeactivate()`  方法。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate guard can-deactivate
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `CrisisDetailComponent`  will have this method.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But the guard doesn't have to know that.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The guard shouldn't know the details of any component's deactivation method.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								It need only detect that the component has a `canDeactivate()`  method and call it.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This approach makes the guard reusable.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								创建了一个 `Guard` ,它将检查这个(任意)组件中是否有 `canDeactivate()`  函数。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`CrisisDetailComponent`  就会有这个方法。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								但是该守卫并不需要知道 `CrisisDetailComponent`  确认退出激活状态的详情。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								它只需要检查该组件是否有一个 `canDeactivate()`  方法,并调用它。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这就让该守卫可以复用。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/can-deactivate.guard.ts"  header = "src/app/can-deactivate.guard.ts" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Alternatively, you could make a component-specific `CanDeactivate`  guard for the `CrisisDetailComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `canDeactivate()`  method provides you with the current
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								instance of the `component` , the current `ActivatedRoute` ,
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								and `RouterStateSnapshot`  in case you needed to access
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								some external information. This would be useful if you only
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								wanted to use this guard for this component and needed to get
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								the component's properties or confirm whether the router should allow navigation away from it.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								另外,你也可以为 `CrisisDetailComponent`  创建一个特定的 `CanDeactivate`  守卫。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								在需要访问外部信息时,`canDeactivate()`  方法为你提供了组件、`ActivatedRoute`  和 `RouterStateSnapshot`  的当前实例。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果只想为这个组件使用该守卫,并且需要获取该组件属性或确认路由器是否允许从该组件导航出去时,这会非常有用。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/can-deactivate.guard.1.ts"  header = "src/app/can-deactivate.guard.ts (component-specific)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Looking back at the `CrisisDetailComponent` , it implements the confirmation workflow for unsaved changes.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								看看 `CrisisDetailComponent`  组件,它已经实现了对未保存的更改进行确认的工作流。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts"  header = "src/app/crisis-center/crisis-detail/crisis-detail.component.ts (excerpt)"  region = "canDeactivate" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Notice that the `canDeactivate()`  method *can*  return synchronously;
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								it returns `true`  immediately if there is no crisis or there are no pending changes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But it can also return a `Promise`  or an `Observable`  and the router will wait for that
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to resolve to truthy (navigate) or falsy (stay put).
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								注意,`canDeactivate`  方法*可以*同步返回,如果没有危机,或者没有未定的修改,它就立即返回 `true` 。但是它也可以返回一个承诺(`Promise` )或可观察对象(`Observable` ),路由器将等待它们被解析为真值(继续导航)或假值(留下)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Add the `Guard`  to the crisis detail route in `crisis-center-routing.module.ts`  using the `canDeactivate`  array property.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								往 `crisis-center.routing.module.ts`  的危机详情路由中用 `canDeactivate`  数组添加一个 `Guard` (守卫)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-center-routing.module.3.ts"  header = "src/app/crisis-center/crisis-center-routing.module.ts (can deactivate guard)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Now you have given the user a safeguard against unsaved changes.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现在,你已经给了用户一个能保护未保存更改的安全守卫。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  Resolve}
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  resolve-guard}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### _Resolve_: pre-fetching component data
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### _Resolve_: 预先获取组件数据
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In the `Hero Detail`  and `Crisis Detail` , the app waited until the route was activated to fetch the respective hero or crisis.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `Hero Detail`  和 `Crisis Detail`  中,它们等待路由读取完对应的英雄和危机。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								This worked well, but there's a better way.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If you were using a real world API, there might be some delay before the data to display is returned from the server.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You don't want to display a blank component while waiting for the data.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这种方式没有问题,但是它们还有进步的空间。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								  如果你在使用真实 api, , 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  在这种情况下,直到数据到达前,显示一个空的组件不是最好的用户体验。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								It's preferable to pre-fetch data from the server so it's ready the
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								moment the route is activated. This also allows you to handle errors before routing to the component.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								There's no point in navigating to a crisis detail for an `id`  that doesn't have a record.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								It'd be better to send the user back to the `Crisis List`  that shows only valid crisis centers.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								最好预先从服务器上获取完数据,这样在路由激活的那一刻数据就准备好了。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								还要在路由到此组件之前处理好错误。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								但当某个 `id`  无法对应到一个危机详情时,就没办法处理它。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								这时最好把用户带回到“危机列表”中,那里显示了所有有效的“危机”。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In summary, you want to delay rendering the routed component until all necessary data have been fetched.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								总之,你希望的是只有当所有必要数据都已经拿到之后,才渲染这个路由组件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You need a *resolver* .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你需要 `Resolve`  守卫。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  fetch-before-navigating}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Fetch data before navigating
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 导航前预先加载路由信息
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								At the moment, the `CrisisDetailComponent`  retrieves the selected crisis.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								If the crisis is not found, it navigates back to the crisis list view.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								目前,`CrisisDetailComponent`  会接收选中的危机。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果该危机没有找到,它就会导航回危机列表视图。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The experience might be better if all of this were handled first, before the route is activated.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								A `CrisisDetailResolver`  service could retrieve a `Crisis`  or navigate away if the `Crisis`  does not exist
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								_before_ activating the route and creating the `CrisisDetailComponent` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果能在该路由将要激活时提前处理了这个问题,那么用户体验会更好。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`CrisisDetailResolver`  服务可以接收一个 `Crisis` ,而如果这个 `Crisis`  不存在,就会在激活该路由并创建 `CrisisDetailComponent`  之前先行离开。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Generate a `CrisisDetailResolver`  service file within the `Crisis Center`  feature area.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `Crisis Center`  特性区生成一个 `CrisisDetailResolver`  服务文件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate service crisis-center/crisis-detail-resolver
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-detail-resolver.service.1.ts"  header = "src/app/crisis-center/crisis-detail-resolver.service.ts (generated)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Take the relevant parts of the crisis retrieval logic in `CrisisDetailComponent.ngOnInit` 
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								and move them into the `CrisisDetailResolverService` .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Import the `Crisis`  model, `CrisisService` , and the `Router` 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								so you can navigate elsewhere if you can't fetch the crisis.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `CrisisDetailComponent.ngOnInit`  中拿到相关的危机检索逻辑,并且把它们移到 `CrisisDetailResolverService`  中。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								导入 `Crisis`  模型、`CrisisService`  和 `Router`  以便让你可以在找不到指定的危机时导航到别处。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Be explicit. Implement the `Resolve`  interface with a type of `Crisis` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								为了更明确一点,可以实现一个带有 `Crisis`  类型的 `Resolve`  接口。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Inject the `CrisisService`  and `Router`  and implement the `resolve()`  method.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								That method could return a `Promise` , an `Observable` , or a synchronous return value.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								注入 `CrisisService`  和 `Router` ,并实现 `resolve()`  方法。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								该方法可以返回一个 `Promise` 、一个 `Observable`  来支持异步方式,或者直接返回一个值来支持同步方式。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-05-10 13:55:06 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `CrisisService.getCrisis`  method returns an observable, in order to prevent the route from loading until the data is fetched.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `Router`  guards require an observable to `complete` , meaning it has emitted all
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								of its values. You use the `take`  operator with an argument of `1`  to ensure that the
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Observable completes after retrieving the first value from the Observable returned by the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`getCrisis`  method. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`CrisisService.getCrisis`  方法返回一个可观察对象,以防止在数据获取完之前加载本路由。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`Router`  守卫要求这个可观察对象必须可结束(`complete` ),也就是说它已经发出了所有值。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								你可以为 `take`  操作符传入一个参数 `1` ,以确保这个可观察对象会在从 `getCrisis`  方法所返回的可观察对象中取到第一个值之后就会结束。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-22 13:10:25 -08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								If it doesn't return a valid `Crisis` , return an empty `Observable` , canceling the previous in-flight navigation to the `CrisisDetailComponent`  and navigate the user back to the `CrisisListComponent` . The updated resolver service looks like this:
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果它没有返回有效的 `Crisis` ,就会返回一个 `Observable` ,以取消以前到 `CrisisDetailComponent`  的在途导航,并把用户导航回 `CrisisListComponent` 。修改后的 `resolver`  服务是这样的:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-detail-resolver.service.ts"  header = "src/app/crisis-center/crisis-detail-resolver.service.ts" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Import this resolver in the `crisis-center-routing.module.ts` 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								and add a `resolve`  object to the `CrisisDetailComponent`  route configuration.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								把这个解析器( ) `crisis-center-routing.module.ts`  中,并往 `CrisisDetailComponent`  的路由配置中添加一个 `resolve`  对象。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-center-routing.module.4.ts"  header = "src/app/crisis-center/crisis-center-routing.module.ts (resolver)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `CrisisDetailComponent`  should no longer fetch the crisis.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Update the `CrisisDetailComponent`  to get the crisis from the  `ActivatedRoute.data.crisis`  property instead;
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								that's where you said it should be when you re-configured the route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It will be there when the `CrisisDetailComponent`  ask for it.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`CrisisDetailComponent`  不应该再去获取这个危机的详情。 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把 `CrisisDetailComponent`  改成从 `ActivatedRoute.data.crisis`  属性中获取危机详情,这正是你重新配置路由的恰当时机。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当 `CrisisDetailComponent`  要求取得危机详情时,它就已经在那里了。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts"  header = "src/app/crisis-center/crisis-detail/crisis-detail.component.ts (ngOnInit v2)"  region = "ngOnInit" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-09-10 08:37:21 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**Two critical points**
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								**两个关键点**
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								1.  The router's `Resolve`  interface is optional. 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `CrisisDetailResolverService`  doesn't inherit from a base class.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router looks for that method and calls it if found.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   路由器的这个 `Resolve`  接口是可选的。`CrisisDetailResolverService`  没有继承自某个基类。路由器只要找到了这个方法,就会调用它。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								1.  Rely on the router to call the resolver. 
						 
					
						
							
								
									
										
										
										
											2019-10-26 21:35:03 +07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Don't worry about all the ways that the user could navigate away.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								That's the router's job. Write this class and let the router take it from there.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   要依赖路由器调用此守卫。不必关心用户用哪种方式导航离开,这是路由器的工作。你只要写出这个类,等路由器从那里取出它就可以了。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The relevant *Crisis Center*  code for this milestone follows.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本里程碑中与*危机中心*有关的代码如下:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "app.component.html"  path = "router/src/app/app.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-center-home.component.html"  path = "router/src/app/crisis-center/crisis-center-home/crisis-center-home.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-center.component.html"  path = "router/src/app/crisis-center/crisis-center/crisis-center.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-center-routing.module.ts"  path = "router/src/app/crisis-center/crisis-center-routing.module.4.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-list.component.html"  path = "router/src/app/crisis-center/crisis-list/crisis-list.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-list.component.ts"  path = "router/src/app/crisis-center/crisis-list/crisis-list.component.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-detail.component.html"  path = "router/src/app/crisis-center/crisis-detail/crisis-detail.component.html" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-11-09 09:01:36 -02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-detail.component.ts"  path = "router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-detail-resolver.service.ts"  path = "router/src/app/crisis-center/crisis-detail-resolver.service.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis.service.ts"  path = "router/src/app/crisis-center/crisis.service.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "dialog.service.ts"  path = "router/src/app/dialog.service.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Guards
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由守卫
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "auth.guard.ts"  path = "router/src/app/auth/auth.guard.3.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "can-deactivate.guard.ts"  path = "router/src/app/can-deactivate.guard.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  query-parameters}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  fragment}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Query parameters and fragments
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 查询参数及片段
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In the [route parameters ](#optional-route-parameters ) example, you only dealt with parameters specific to
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								the route, but what if you wanted optional parameters available to all routes?
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This is where query parameters come into play.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-23 00:09:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在这个[查询参数 ](#optional-route-parameters )例子中,你只为路由指定了参数,但是该如何定义一些所有路由中都可用的可选参数呢?
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这就该“查询参数”登场了。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								[Fragments ](https://en.wikipedia.org/wiki/Fragment_identifier ) refer to certain elements on the page
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								identified with an `id`  attribute.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								[片段 ](https://en.wikipedia.org/wiki/Fragment_identifier )可以引用页面中带有特定 `id`  属性的元素.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Update the `AuthGuard`  to provide a `session_id`  query that will remain after navigating to another route.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								修改 `AuthGuard`  以提供 `session_id`  查询参数,在导航到其它路由后,它还会存在。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Add an `anchor`  element so you can jump to a certain point on the page.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								再添加一个锚点(`A` )元素,来让你能跳转到页面中的正确位置。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-03-12 19:49:39 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Add the `NavigationExtras`  object to the `router.navigate()`  method that navigates you to the `/login`  route.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								为 `router.navigate()`  方法添加一个 `NavigationExtras`  对象,用来导航到 `/login`  路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/auth/auth.guard.4.ts"  header = "src/app/auth/auth.guard.ts (v3)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You can also preserve query parameters and fragments across navigations without having to provide them
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								again when navigating. In the `LoginComponent` , you'll add an *object*  as the
							 
						 
					
						
							
								
									
										
										
										
											2019-03-12 19:49:39 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								second argument in the `router.navigateUrl()`  function
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								and provide the `queryParamsHandling`  and `preserveFragment`  to pass along the current query parameters
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and fragment to the next route.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								还可以在导航之间**保留**查询参数和片段,而无需再次在导航中提供。在 `LoginComponent`  中的 `router.navigateUrl()`  方法中,添加一个对象作为第二个参数,该**对象**提供了 `queryParamsHandling`  和 `preserveFragment` ,用于传递当前的查询参数和片段到下一个路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/auth/login/login.component.ts"  header = "src/app/auth/login/login.component.ts (preserve)"  region = "preserve" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `queryParamsHandling`  feature also provides a `merge`  option, which will preserve and combine the current query parameters with any provided query parameters
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								when navigating.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-14 09:13:52 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`queryParamsHandling`  特性还提供了 `merge`  选项,它将会在导航时保留当前的查询参数,并与其它查询参数合并。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								As you'll be navigating to the *Admin Dashboard*  route after logging in, you'll update it to handle the
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								query parameters and fragment.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-23 09:48:55 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								由于要在登录后导航到*危机管理*特征区的路由,所以你还得修改它,来处理这些全局查询参数和片段。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts"  header = "src/app/admin/admin-dashboard/admin-dashboard.component.ts (v2)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*Query parameters* and *fragments*  are also available through the `ActivatedRoute`  service.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Just like *route parameters* , the query parameters and fragments are provided as an `Observable` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The updated *Crisis Admin*  component feeds the `Observable`  directly into the template using the `AsyncPipe` .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*查询参数*和*片段*可通过 `Router`  服务的 `routerState`  属性使用。和*路由参数*类似,全局查询参数和片段也是 `Observable`  对象。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  在修改过的*英雄管理*组件中,你将借助 `AsyncPipe`  直接把 `Observable`  传给模板。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Now, you can click on the *Admin*  button, which takes you to the *Login* 
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								page with the provided `queryParamMap`  and `fragment` . After you click the login button, notice that
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								you have been redirected to the `Admin Dashboard`  page with the query parameters and fragment still intact in the address bar.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								按照下列步骤试验下:点击*Crisis Admin*按钮,它会带着你提供的 `queryParamMap`  和 `fragment`  跳转到登录页。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								点击登录按钮,你就会被重定向到 `Admin Dashboard`  页。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								注意,它仍然带着上一步提供的 `queryParamMap`  和 `fragment` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You can use these persistent bits of information for things that need to be provided across pages like
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								authentication tokens or session ids.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以用这些持久化信息来携带需要为每个页面都提供的信息,如认证令牌或会话的 ID 等。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `query params`  and `fragment`  can also be preserved using a `RouterLink`  with
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								the `queryParamsHandling`  and `preserveFragment`  bindings respectively.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-23 00:38:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								“查询参数”和“片段”也可以分别用 `RouterLink`  中的 **queryParamsHandling**  和 **preserveFragment**  保存。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-30 22:10:32 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  asynchronous-routing}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## Milestone 6: Asynchronous routing
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								## 里程碑 6:   
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								As you've worked through the milestones, the application has naturally gotten larger.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								As you continue to build out feature areas, the overall application size will continue to grow.
							 
						 
					
						
							
								
									
										
										
										
											2018-10-02 00:33:08 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								At some point you'll reach a tipping point where the application takes a long time to load.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-08-23 21:51:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								完成上面的里程碑后,应用程序很自然地长大了。在继续构建特征区的过程中,应用的尺寸将会变得更大。在某一个时间点,你将达到一个顶点,应用将会需要过多的时间来加载。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								How do you combat this problem?  With asynchronous routing, which loads feature modules _lazily_ , on request.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Lazy loading has multiple benefits.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如何才能解决这个问题呢?通过引进异步路由,可以获得在请求时才**惰性**加载特性模块的能力。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								惰性加载有多个优点:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  You can load feature areas only when requested by the user. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   你可以只在用户请求时才加载某些特性区。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  You can speed up load time for users that only visit certain areas of the application. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   对于那些只访问应用程序某些区域的用户,这样能加快加载速度。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  You can continue expanding lazy loaded feature areas without increasing the size of the initial load bundle. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   你可以持续扩充惰性加载特性区的功能,而不用增加初始加载的包体积。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-05-18 12:49:09 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You're already part of the way there.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								By organizing the application into modules— `AppModule` ,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								`HeroesModule` , `AdminModule`  and `CrisisCenterModule` — you 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								have natural candidates for lazy loading.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								你已经完成了一部分。通过把应用组织成一些模块:`AppModule` 、`HeroesModule` 、`AdminModule`  和 `CrisisCenterModule` , 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								你已经有了可用于实现惰性加载的候选者。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Some modules, like `AppModule` , must be loaded from the start.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								But others can and should be lazy loaded.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `AdminModule` , for example, is needed by a few authorized users, so
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								you should only load it when requested by the right people.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								有些模块(比如 `AppModule` )必须在启动时加载,但其它的都可以而且应该惰性加载。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								比如 `AdminModule`  就只有少数已认证的用户才需要它,所以你应该只有在正确的人请求它时才加载。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  lazy-loading-route-config}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Lazy Loading route configuration
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 惰性加载路由配置
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Change the `admin`  **path**  in the `admin-routing.module.ts`  from `'admin'`  to an empty string, `''` , the _empty path_ .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把 `admin-routing.module.ts`  中的 `admin`  路径从 `'admin'`  改为空路径 `''` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `Router`  supports  *empty path*  routes;
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								use them to group routes together without adding any additional path segments to the URL.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Users will still visit `/admin`  and the `AdminComponent`  still serves as the *Routing Component*  containing child routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`Router`  支持*空路径*路由,可以使用它们来分组路由,而不用往 URL 中添加额外的路径片段。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								用户仍旧访问 `/admin` ,并且 `AdminComponent`  仍然作为用来包含子路由的*路由组件*。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Open the `AppRoutingModule`  and add a new `admin`  route to its `appRoutes`  array.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								打开 `AppRoutingModule` ,并把一个新的 `admin`  路由添加到它的 `appRoutes`  数组中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-05-17 14:31:48 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Give it a `loadChildren`  property instead of a `children`  property.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `loadChildren`  property takes a function that returns a promise using the browser's built-in syntax for lazy loading code using dynamic imports `import('...')` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The path is the location of the `AdminModule`  (relative to the app root).
							 
						 
					
						
							
								
									
										
										
										
											2019-06-07 12:29:04 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								After the code is requested and loaded, the `Promise`  resolves an object that contains the `NgModule` , in this case the  `AdminModule` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-07 13:37:23 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								给它一个 `loadChildren`  属性(替换掉 `children`  属性)。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								`loadChildren`  属性接收一个函数,该函数使用浏览器内置的动态导入语法 `import('...')`  来惰性加载代码, ( )  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								其路径是 `AdminModule`  的位置(相对于应用的根目录)。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								当代码请求并加载完毕后,这个 `Promise`  就会解析成一个包含 `NgModule`  的对象,也就是 `AdminModule` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.5.ts"  region = "admin-1"  header = "app-routing.module.ts (load children)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-important" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*Note*: When using absolute paths, the `NgModule`  file location must begin with `src/app`  in order to resolve correctly. For custom [path mapping with absolute paths ](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping ), the `baseUrl`  and `paths`  properties in the project `tsconfig.json`  must be configured.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:43:29 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								**注意**: `NgModule`  的文件位置必须以 `src/app`  开头,以便正确解析。对于自定义的 [使用绝对路径的路径映射表 ](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping ),项目的 `tsconfig.json`  中必须配置好 `baseUrl`  和 `paths`  属性。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When the router navigates to this route, it uses the `loadChildren`  string to dynamically load the `AdminModule` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Then it adds the `AdminModule`  routes to its current route configuration.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Finally, it loads the requested route to the destination admin component.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当路由器导航到这个路由时,它会用 `loadChildren`  字符串来动态加载 `AdminModule` ,然后把 `AdminModule`  添加到当前的路由配置中,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								最后,它把所请求的路由加载到目标 `admin`  组件中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The lazy loading and re-configuration happen just once, when the route is _first_  requested;
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								the module and routes are available immediately for subsequent requests.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								惰性加载和重新配置工作只会发生一次,也就是在该路由*首次*被请求时。在后续的请求中,该模块和路由都是立即可用的。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Angular provides a built-in module loader that supports SystemJS to load modules asynchronously. If you were
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								using another bundling tool, such as Webpack, you would use the Webpack mechanism for asynchronously loading modules.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Angular 提供一个内置模块加载器,支持**`SystemJS` **来异步加载模块。如果你使用其它捆绑工具比如 **Webpack** ,则使用 Webpack 的机制来异步加载模块。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Take the final step and detach the admin feature set from the main application.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The root `AppModule`  must neither load nor reference the `AdminModule`  or its files.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								最后一步是把管理特性区从主应用中完全分离开。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								根模块 `AppModule`  既不能加载也不能引用 `AdminModule`  及其文件。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In `app.module.ts` , remove the `AdminModule`  import statement from the top of the file
							 
						 
					
						
							
								
									
										
										
										
											2017-07-11 18:05:20 -04:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								and remove the `AdminModule`  from the NgModule's `imports`  array.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-27 22:10:45 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `app.module.ts`  中,从顶部移除 `AdminModule`  的导入语句,并且从 NgModule 的 `imports`  数组中移除 `AdminModule` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  can-load-guard}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### _CanLoad_ Guard: guarding unauthorized loading of feature modules
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### `CanLoad` 守卫:保护对特性模块的未授权加载
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You're already protecting the `AdminModule`  with a `CanActivate`  guard that prevents unauthorized users from
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								accessing the admin feature area.
							 
						 
					
						
							
								
									
										
										
										
											2019-10-26 21:35:03 +07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								It redirects to the login page if the user is not authorized.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你已经使用 `CanActivate`  保护 `AdminModule`  了,它会阻止未授权用户访问管理特性区。如果用户未登录,它就会跳转到登录页。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But the router is still loading the `AdminModule`  even if the user can't visit any of its components.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-06 10:43:33 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Ideally, you'd only load the `AdminModule`  if the user is logged in.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								但是路由器仍然会加载 `AdminModule`  —— 即使用户无法访问它的任何一个组件。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								理想的方式是,只有在用户已登录的情况下你才加载 `AdminModule` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Add a ** `CanLoad` ** guard that only loads the `AdminModule`  once the user is logged in _and_  attempts to access the admin feature area.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								添加一个**`CanLoad` **守卫,它只在用户已登录*并且*尝试访问管理特性区的时候,才加载 `AdminModule`  一次。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The existing `AuthGuard`  already has the essential logic in
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								its `checkLogin()`  method to support the `CanLoad`  guard.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现有的 `AuthGuard`  的 `checkLogin()`  方法中已经有了支持 `CanLoad`  守卫的基础逻辑。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Open `auth.guard.ts` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Import the `CanLoad`  interface from `@angular/router` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Add it to the `AuthGuard`  class's `implements`  list.
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Then implement `canLoad()`  as follows:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-12-31 22:29:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								打开 `auth.guard.ts` ,从 `@angular/router`  中导入 `CanLoad`  接口。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把它添加到 `AuthGuard`  类的 `implements`  列表中。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								然后实现 `canLoad` ,代码如下:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/auth/auth.guard.ts"  header = "src/app/auth/auth.guard.ts (CanLoad guard)"  region = "canLoad" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router sets the `canLoad()`  method's `route`  parameter to the intended destination URL.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `checkLogin()`  method redirects to that URL once the user has logged in.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器会把 `canLoad()`  方法的 `route`  参数设置为准备访问的目标 URL。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果用户已经登录了,`checkLogin()`  方法就会重定向到那个 URL。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Now import the `AuthGuard`  into the `AppRoutingModule`  and add the `AuthGuard`  to the `canLoad` 
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								array property for the `admin`  route.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The completed admin route looks like this:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现在,把 `AuthGuard`  导入到 `AppRoutingModule`  中,并把 `AuthGuard`  添加到 `admin`  路由的 `canLoad`  数组中。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								完整的 `admin`  路由是这样的:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.5.ts"  region = "admin"  header = "app-routing.module.ts (lazy admin route)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  preloading}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Preloading: background loading of feature areas
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### 预加载:特性区的后台加载
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You've learned how to load modules on-demand.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can also load modules asynchronously with _preloading_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你已经学会了如何按需加载模块,接下来再看看如何使用*预加载*技术异步加载模块。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This may seem like what the app has been doing all along. Not quite.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `AppModule`  is loaded when the application starts; that's _eager_  loading.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Now the `AdminModule`  loads only when the user clicks on a link; that's _lazy_  loading.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								看起来好像应用一直都是这么做的,但其实并非如此。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`AppModule`  在应用启动时就被加载了,它是*立即*加载的。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								而 `AdminModule`  只有当用户点击某个链接时才会加载,它是*惰性*加载的。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								_Preloading_ is something in between.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Consider the _Crisis Center_ .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								It isn't the first view that a user sees.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								By default, the _Heroes_  are the first view.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								For the smallest initial payload and fastest launch time,
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								you should eagerly load the `AppModule`  and the `HeroesModule` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*预加载*是介于两者之间的一种方式。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								来看看*危机中心*。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								用户第一眼不会看到它。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								默认情况下,*英雄管理*才是第一视图。
							 
						 
					
						
							
								
									
										
										
										
											2019-01-26 22:58:06 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								为了获得尽可能小的初始加载体积和最快的加载速度,你应该对 `AppModule`  和 `HeroesModule`  进行急性加载。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You could lazy load the _Crisis Center_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But you're almost certain that the user will visit the _Crisis Center_  within minutes of launching the app.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Ideally, the app would launch with just the `AppModule`  and the `HeroesModule`  loaded
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and then, almost immediately, load the `CrisisCenterModule`  in the background.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								By the time the user navigates to the _Crisis Center_ , its module will have been loaded and ready to go.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以惰性加载*危机中心*。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								但是,你几乎可以肯定用户会在启动应用之后的几分钟内访问*危机中心*。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								理想情况下,应用启动时应该只加载 `AppModule`  和 `HeroesModule` ,然后几乎立即开始后台加载 `CrisisCenterModule` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在用户浏览到*危机中心*之前,该模块应该已经加载完毕,可供访问了。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								That's _preloading_ .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这就是*预加载*。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  how-preloading}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### How preloading works
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 预加载的工作原理
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								After each _successful_  navigation, the router looks in its configuration for an unloaded module that it can preload.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Whether it preloads a module, and which modules it preloads, depends upon the *preload strategy* .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在每次*成功的*导航后,路由器会在自己的配置中查找尚未加载并且可以预加载的模块。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								是否加载某个模块,以及要加载哪些模块,取决于*预加载策略*。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `Router`  offers two preloading strategies out of the box:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`Router`  内置了两种预加载策略: 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  No preloading at all which is the default. Lazy loaded feature areas are still loaded on demand. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   完全不预加载,这是默认值。惰性加载的特性区仍然会按需加载。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  Preloading of all lazy loaded feature areas. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   预加载所有惰性加载的特性区。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Out of the box, the router either never preloads, or preloads every lazy load module.
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `Router`  also supports [custom preloading strategies ](#custom-preloading ) for
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								fine control over which modules to preload and when.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								默认情况下,路由器或者完全不预加载或者预加载每个惰性加载模块。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								路由器还支持[自定义预加载策略 ](guide/router#custom-preloading ),以便完全控制要预加载哪些模块以及何时加载。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In this next section, you'll update the `CrisisCenterModule`  to load lazily
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								by default and use the `PreloadAllModules`  strategy
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to load it (and _all other_  lazy loaded modules) as soon as possible.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在下一节,你将会把 `CrisisCenterModule`  改为默认惰性加载的,并使用 `PreloadAllModules`  策略来尽快加载它(以及*所有其它*惰性加载模块)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  lazy-load-crisis-center}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### Lazy load the _crisis center_
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 惰性加载*危机中心*
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Update the route configuration to lazy load the `CrisisCenterModule` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Take the same steps you used to configure `AdminModule`  for lazy load.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								修改路由配置,来惰性加载 `CrisisCenterModule` 。修改的步骤和配置惰性加载 `AdminModule`  时一样。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  Change the `crisis-center`  path in the `CrisisCenterRoutingModule`  to an empty string. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把 `CrisisCenterRoutingModule`  中的路径从 `crisis-center`  改为空字符串。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  Add a `crisis-center`  route to the `AppRoutingModule` . 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   往 `AppRoutingModule`  中添加一个 `crisis-center`  路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  Set the `loadChildren`  string to load the `CrisisCenterModule` . 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   设置 `loadChildren`  字符串来加载 `CrisisCenterModule` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  Remove all mention of the `CrisisCenterModule`  from `app.module.ts` . 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   从 `app.module.ts`  中移除所有对 `CrisisCenterModule`  的引用。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Here are the updated modules _before enabling preload_ :
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								下面是打开预加载之前的模块修改版:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-tabs >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "app.module.ts"  path = "router/src/app/app.module.ts"  region = "preload" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "app-routing.module.ts"  path = "router/src/app/app-routing.module.6.ts"  region = "preload-v1" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-11 13:29:59 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < code-pane  header = "crisis-center-routing.module.ts"  path = "router/src/app/crisis-center/crisis-center-routing.module.ts" > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  < / code-pane > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / code-tabs >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You could try this now and confirm that the  `CrisisCenterModule`  loads after you click the "Crisis Center" button.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								你可以现在尝试它, `CrisisCenterModule` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								To enable preloading of all lazy loaded modules, import the `PreloadAllModules`  token from the Angular router package.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								要为所有惰性加载模块启用预加载功能,请从 Angular 的路由模块中导入 `PreloadAllModules` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The second argument in the `RouterModule.forRoot()`  method takes an object for additional configuration options.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `preloadingStrategy`  is one of those options.
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Add the `PreloadAllModules`  token to the `forRoot()`  call:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`RouterModule.forRoot()`  方法的第二个参数接受一个附加配置选项对象。 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`preloadingStrategy`  就是其中之一。 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								把 `PreloadAllModules`  添加到 `forRoot()`  调用中:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.6.ts"  header = "src/app/app-routing.module.ts (preload all)"  region = "forRoot" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This tells the `Router`  preloader to immediately load _all_  lazy loaded routes (routes with a `loadChildren`  property).
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这会让 `Router`  预加载器立即加载*所有*惰性加载路由(带 `loadChildren`  属性的路由)。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								When you visit `http://localhost:4200` , the `/heroes`  route loads immediately upon launch
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and the router starts loading the `CrisisCenterModule`  right after the `HeroesModule`  loads.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当访问 `http://localhost:4200`  时,`/heroes`  路由立即随之启动,并且路由器在加载了 `HeroesModule`  之后立即开始加载 `CrisisCenterModule` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Surprisingly, the `AdminModule`  does _not_  preload. Something is blocking it.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								意外的是,`AdminModule` *没有*预加载,有什么东西阻塞了它。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  preload-canload}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### CanLoad blocks preload
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### CanLoad 会阻塞预加载
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `PreloadAllModules`  strategy does not load feature areas protected by a [CanLoad ](#can-load-guard ) guard.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This is by design.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`PreloadAllModules`  策略不会加载被[CanLoad ](guide/router#can-load-guard )守卫所保护的特性区。这是刻意设计的。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You added a `CanLoad`  guard to the route in the `AdminModule`  a few steps back
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to block loading of that module until the user is authorized.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								That `CanLoad`  guard takes precedence over the preload strategy.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你几步之前刚刚给 `AdminModule`  中的路由添加了 `CanLoad`  守卫,以阻塞加载那个模块,直到用户认证结束。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`CanLoad`  守卫的优先级高于预加载策略。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								If you want to preload a module _and_  guard against unauthorized access,
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								drop the `canLoad()`  guard method and rely on the [canActivate() ](#can-activate-guard ) guard alone.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								如果你要加载一个模块*并且*保护它防止未授权访问,请移除 `canLoad`  守卫,只单独依赖[CanActivate ](guide/router#can-activate-guard )守卫。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  custom-preloading}
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Custom Preloading Strategy
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 自定义预加载策略
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Preloading every lazy loaded modules works well in many situations,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								but it isn't always the right choice, especially on mobile devices and over low bandwidth connections.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You may choose to preload only certain feature modules, based on user metrics and other business and technical factors.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在大多数场景下,预加载每个惰性加载模块就很好了,但是有时候它却并不是正确的选择,特别是在移动设备和低带宽连接下。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可能出于用户的测量和其它商业和技术因素而选择只对某些特性模块进行预加载。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can control what and how the router preloads with a custom preloading strategy.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								使用自定义预加载策略,你可以控制路由器预加载哪些路由以及如何加载。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								In this section, you'll add a custom strategy that _only_  preloads routes whose `data.preload`  flag is set to `true` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Recall that you can add anything to the `data`  property of a route.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在这一节,你将添加一个自定义策略,它*只*预加载那些 `data.preload`  标志为 `true`  的路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								回忆一下,你可以往路由的 `data`  属性中添加任何东西。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Set the `data.preload`  flag in the `crisis-center`  route in the `AppRoutingModule` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在 `AppRoutingModule`  的 `crisis-center`  路由中设置 `data.preload`  标志。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.ts"  header = "src/app/app-routing.module.ts (route data preload)"  region = "preload-v2" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Generate a new `SelectivePreloadingStrategy`  service.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								生成一个新的 `SelectivePreloadingStrategy`  服务。
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  language = "none"  class = "code-shell" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								  ng generate service selective-preloading-strategy
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/selective-preloading-strategy.service.ts"  header = "src/app/selective-preloading-strategy.service.ts (excerpt)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`SelectivePreloadingStrategyService`  implements the `PreloadingStrategy` , which has one method, `preload` . 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`SelectivePreloadingStrategyService`  实现了 `PreloadingStrategy` ,它只有一个方法 `preload` 。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router calls the `preload`  method with two arguments:
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器会用两个参数调用调用 `preload`  方法:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  The route to consider. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   要加载的路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  A loader function that can load the routed module asynchronously. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								   一个加载器( ) , 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-05-10 13:55:06 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								An implementation of `preload`  must return an `Observable` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If the route should preload, it returns the observable returned by calling the loader function.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								If the route should _not_  preload, it returns an `Observable`  of `null` .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`preload`  的实现必须返回一个 `Observable` 。 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果该路由应该预加载,它就会返回调用加载器函数所返回的 `Observable` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果该路由*不*应该预加载,它就返回一个 `null`  值的 `Observable`  对象。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In this sample, the  `preload`  method loads the route if the route's `data.preload`  flag is truthy.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在这个例子中,`preload`  方法只有在路由的 `data.preload`  标识为真时才会加载该路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								It also has a side-effect.
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`SelectivePreloadingStrategyService`  logs the `path`  of a selected route in its public `preloadedModules`  array. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它还有一个副作用。
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`SelectivePreloadingStrategyService`  会把所选路由的 `path`  记录在它的公共数组 `preloadedModules`  中。 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Shortly, you'll extend the `AdminDashboardComponent`  to inject this service and display its `preloadedModules`  array.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								很快,你就会扩展 `AdminDashboardComponent`  来注入该服务,并且显示它的 `preloadedModules`  数组。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								But first, make a few changes to the `AppRoutingModule` .
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								但是首先,要对 `AppRoutingModule`  做少量修改。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								1.  Import `SelectivePreloadingStrategyService`  into `AppRoutingModule` . 
						 
					
						
							
								
									
										
										
										
											2018-02-28 13:43:40 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把 `SelectivePreloadingStrategyService`  导入到 `AppRoutingModule`  中。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								1.  Replace the `PreloadAllModules`  strategy in the call to `forRoot()`  with this `SelectivePreloadingStrategyService` . 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把 `PreloadAllModules`  策略替换成对 `forRoot()`  的调用,并且传入这个 `SelectivePreloadingStrategyService` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								1.  Add the `SelectivePreloadingStrategyService`  strategy to the `AppRoutingModule`  providers array so it can be injected 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								elsewhere in the app.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把 `SelectivePreloadingStrategyService`  策略添加到 `AppRoutingModule`  的 `providers`  数组中,以便它可以注入到应用中的任何地方。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Now edit the `AdminDashboardComponent`  to display the log of preloaded routes.
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现在,编辑 `AdminDashboardComponent`  以显示这些预加载路由的日志。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								1.  Import the `SelectivePreloadingStrategyService` . 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   导入 `SelectivePreloadingStrategyService` (它是一个服务)。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  Inject it into the dashboard's constructor. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   把它注入到仪表盘的构造函数中。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  Update the template to display the strategy service's `preloadedModules`  array. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   修改模板来显示这个策略服务的 `preloadedModules`  数组。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When you're done it looks like this.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当完成时,代码如下:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/admin/admin-dashboard/admin-dashboard.component.ts"  header = "src/app/admin/admin-dashboard/admin-dashboard.component.ts (preloaded modules)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Once the application loads the initial route, the `CrisisCenterModule`  is preloaded.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Verify this by logging in to the `Admin`  feature area and noting that the `crisis-center`  is listed in the `Preloaded Modules` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It's also logged to the browser's console.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								一旦应用加载完了初始路由,`CrisisCenterModule`  也被预加载了。
							 
						 
					
						
							
								
									
										
										
										
											2018-12-24 20:41:27 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								通过 `Admin`  特性区中的记录就可以验证它, `crisis-center` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								它也被记录到了浏览器的控制台。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  redirect-advanced}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## Migrating URLs with Redirects
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## 使用重定向迁移 URL
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You've setup the routes for navigating around your application. You've used navigation imperatively and declaratively to many different routes. But like any application, requirements change over time. You've setup links and navigation to `/heroes`  and `/hero/:id`  from the `HeroListComponent`  and `HeroDetailComponent`  components. If there was a requirement that links to `heroes`  become `superheroes` , you still want the previous URLs to navigate correctly. You also don't want to go and update every link in your application, so redirects makes refactoring routes trivial.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你已经设置好了路由,并且用命令式和声明式的方式导航到了很多不同的路由。但是,任何应用的需求都会随着时间而改变。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								你把链接 `/heroes`  和 `hero/:id`  指向了 `HeroListComponent`  和 `HeroDetailComponent`  组件。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								如果有这样一个需求,要把链接 `heroes`  变成 `superheroes` ,你仍然希望以前的 URL 能正常导航。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								但你也不想在应用中找到并修改每一个链接,这时候,重定向就可以省去这些琐碎的重构工作。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  url-refactor}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								### Changing /heroes to /superheroes
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 把 `/heroes` 修改为 `/superheros`
  
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Let's take the `Hero`  routes and migrate them to new URLs. The `Router`  checks for redirects in your configuration before navigating, so each redirect is triggered when needed. To support this change, you'll add redirects from the old routes to the new routes in the `heroes-routing.module` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								先取得 `Hero`  路由,并把它们迁移到新的 URL。`Router` (路由器)会在开始导航之前先在配置中检查所有重定向语句,以便将来按需触发重定向。要支持这种修改,你就要在 `heroes-routing.module`  文件中把老的路由重定向到新的路由。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/heroes-routing.module.ts"  header = "src/app/heroes/heroes-routing.module.ts (heroes redirects)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You'll notice two different types of redirects. The first change is from  `/heroes`  to `/superheroes`  without any parameters. This is a straightforward redirect, unlike the change from `/hero/:id`  to `/superhero/:id` , which includes the `:id`  route parameter. Router redirects also use powerful pattern matching, so the `Router`  inspects the URL and replaces route parameters in the `path`  with their appropriate destination. Previously, you navigated to a URL such as `/hero/15`  with a route parameter `id`  of `15` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								注意,这里有两种类型的重定向。第一种是不带参数的从 `/heroes`  重定向到 `/superheroes` 。这是一种非常直观的重定向。第二种是从 `/hero/:id`  重定向到 `/superhero/:id` ,它还要包含一个 `:id`  路由参数。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								路由器重定向时使用强大的模式匹配功能,这样,路由器就会检查 URL, `path`  中带的路由参数替换成相应的目标形式。以前,你导航到形如 `/hero/15`  的 URL 时,带了一个路由参数 `id` ,它的值是 `15` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The `Router`  also supports [query parameters ](#query-parameters ) and the [fragment ](#fragment ) when using redirects.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在重定向的时候,路由器还支持[查询参数 ](#query-parameters )和[片段(fragment) ](#fragment )。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  When using absolute redirects, the `Router`  will use the query parameters and the fragment from the redirectTo in the route config. 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   当使用绝对地址重定向时,路由器将会使用路由配置的 `redirectTo`  属性中规定的查询参数和片段。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  When using relative redirects, the `Router`  use the query params and the fragment from the source URL. 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   当使用相对地址重定向时,路由器将会使用源地址(跳转前的地址)中的查询参数和片段。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Before updating the `app-routing.module.ts` , you'll need to consider an important rule. Currently, our empty path route redirects to `/heroes` , which redirects to `/superheroes` . This _won't_  work and is by design as the `Router`  handles redirects once at each level of routing configuration. This prevents chaining of redirects, which can lead to endless redirect loops.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在修改 `app-routing.module.ts`  之前,你要先考虑一条重要的规则。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								目前,你把空路径路由重定向到了 `/heroes` ,它又被重定向到了 `/superheroes` 。这样*不行*,从设计上就不行。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								因为路由器在每一层的路由配置中只会处理一次重定向。这样可以防止出现无限循环的重定向。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								So instead, you'll update the empty path route in `app-routing.module.ts`  to redirect to `/superheroes` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								所以,你要在 `app-routing.module.ts`  中修改空路径路由,让它重定向到 `/superheroes` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app-routing.module.ts"  header = "src/app/app-routing.module.ts (superheroes redirect)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`RouterLink` s aren't tied to route configuration, so you'll need to update the associated router links so they remain active when the new route is active. You'll update the `app.component.ts`  template for the `/heroes`  routerLink. 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-23 09:43:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								由于 `RouterLink`  指令没有关联到路由配置,所以你需要修改相关的路由链接,以便在新的路由激活时,它们也能保持激活状态。你要修改 `app.component.ts`  模板中的 `/heroes`  路由链接。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.html"  header = "src/app/app.component.html (superheroes active routerLink)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Update the `goToHeroes()`  method in the `hero-detail.component.ts`  to navigate back to `/superheroes`  with the optional route parameters.
							 
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								修改 `hero-detail.component.ts`  中的 `goToHeroes()`  方法,使用可选的路由参数导航回 `/superheroes` 。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-detail/hero-detail.component.ts"  region = "redirect"  header = "src/app/heroes/hero-detail/hero-detail.component.ts (goToHeroes)" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-07-16 13:24:33 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								With the redirects setup, all previous routes now point to their new destinations and both URLs still function as intended.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当这些重定向设置好之后,所有以前的路由都指向了它们的新目标,并且每个 URL 也仍然能正常工作。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-01 11:40:31 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  inspect-config}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## Inspect the router's configuration
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## 审查路由器配置
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You put a lot of effort into configuring the router in several routing module files
							 
						 
					
						
							
								
									
										
										
										
											2017-06-18 21:09:02 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								and were careful to list them [in the proper order ](#routing-module-order ).
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Are routes actually evaluated as you planned?
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								How is the router really configured?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你把大量的精力投入到在一系列路由模块文件里配置路由器上,并且小心的[以合适的顺序 ](guide/router#routing-module-order )列出它们。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这些路由是否真的如同你预想的那样执行了?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								路由器的真实配置是怎样的?
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can inspect the router's current configuration any time by injecting it and
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								examining its `config`  property.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								For example, update the `AppModule`  as follows and look in the browser console window
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to see the finished route configuration.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								通过注入它( ) `config`  属性,你可以随时审查路由器的当前配置。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								例如,把 `AppModule`  修改为这样,并在浏览器的控制台窗口中查看最终的路由配置。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2020-01-11 18:10:12 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.7.ts"  header = "src/app/app.module.ts (inspect the router config)"  region = "inspect-config" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  final-app}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## Wrap up and final app
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## 总结与最终的应用
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You've covered a lot of ground in this guide and the application is too big to reprint here.
							 
						 
					
						
							
								
									
										
										
										
											2017-11-03 18:08:28 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Please visit the < live-example  title = "Router Sample in Stackblitz" > < / live-example > 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								where you can download the final source code.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 16:15:21 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本章中涉及到了很多背景知识,而且本应用程序也太大了,所以没法在这里显示。请访问< live-example  title = "Router Sample in Stackblitz" > < / live-example > ,在那里你可以下载最终的源码。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  appendices}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								## Appendices
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								## 附录
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The balance of this guide is a set of appendices that
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								elaborate some of the points you covered quickly above.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								本章剩下的部分是一组附录,它详尽阐述了那些曾匆匆带过的知识点。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The appendix material isn't essential. Continued reading is for the curious.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								该附件中的内容不是必须的,感兴趣的人才需要阅读它。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  link-parameters-array}
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-05-26 21:28:06 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Appendix: link parameters array
  
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-06 13:21:34 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 附录:链接参数数组
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								A link parameters array holds the following ingredients for router navigation:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								链接参数数组保存路由导航时所需的成分:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  The *path*  of the route to the destination component. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								   指向目标组件的那个路由的*路径( ) 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Required and optional route parameters that go into the route URL. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   必备路由参数和可选路由参数,它们将进入该路由的 URL
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can bind the `RouterLink`  directive to such an array like this:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以把 `RouterLink`  指令绑定到一个数组,就像这样:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.3.ts"  header = "src/app/app.component.ts (h-anchor)"  region = "h-anchor" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								You've written a two element array when specifying a route parameter like this:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在指定路由参数时,你写过一个双元素的数组,就像这样:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/heroes/hero-list/hero-list.component.1.html"  header = "src/app/heroes/hero-list/hero-list.component.html (nav-to-detail)"  region = "nav-to-detail" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can provide optional route parameters in an object like this:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以在对象中提供可选的路由参数,就像这样:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.3.ts"  header = "src/app/app.component.ts (cc-query-params)"  region = "cc-query-params" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								These three examples cover the need for an app with one level routing.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The moment you add a child router, such as the crisis center, you create new link array possibilities.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这三个例子涵盖了你在单级路由的应用中所需的一切。在你添加一个像*危机中心*一样的子路由时,你可以创建新链接数组。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Recall that you specified a default child route for the crisis center so this simple `RouterLink`  is fine.
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								回忆一下,你曾为*危机中心*指定过一个默认的子路由,以便能使用这种简单的 `RouterLink` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.3.ts"  header = "src/app/app.component.ts (cc-anchor-w-default)"  region = "cc-anchor-w-default" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Parse it out.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								分解一下。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  The first item in the array identifies the parent route (`/crisis-center` ). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   数组中的第一个条目标记出了父路由(`/crisis-center` )。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  There are no parameters for this parent route so you're done with it. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   这个父路由没有参数,因此这步已经完成了。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  There is no default for the child route so you need to pick one. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   没有默认的子路由,因此你得选取一个。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  You're navigating to the `CrisisListComponent` , whose route path is `/` , but you don't need to explicitly add the slash. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   你决定跳转到 `CrisisListComponent` ,它的路由路径是'/',但你不用显式的添加它。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  Voilà! `['/crisis-center']` . 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   哇!`['/crisis-center']` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-26 15:11:02 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Take it a step further. Consider the following router link that
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								navigates from the root of the application down to the *Dragon Crisis* :
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								更进一步。这次要构建一个从根组件往下导航到“巨龙危机”时的链接参数数组:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.3.ts"  header = "src/app/app.component.ts (Dragon-anchor)"  region = "Dragon-anchor" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  The first item in the array identifies the parent route (`/crisis-center` ). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-07 13:28:58 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   数组中的第一个条目标记出了父路由(`/crisis-center` )。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  There are no parameters for this parent route so you're done with it. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   这个父路由没有参数,因此这步已经完成了。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  The second item identifies the child route details about a particular crisis (`/:id` ). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   数组中的第二个条目('/:id')用来标记出到指定危机的详情页的子路由。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  The details child route requires an `id`  route parameter. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   详细的子路由需要一个 `id`  路由参数。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								*  You added the `id`  of the *Dragon Crisis*  as the second item in the array (`1` ). 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   你把*巨龙危机*的 `id`  添加为该数组中的第二个条目(`1` )。
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								*  The resulting path is `/crisis-center/1` . 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   最终生成的路径是 `/crisis-center/1` 。
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If you wanted to, you could redefine the `AppComponent`  template with *Crisis Center*  routes exclusively:
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								只要想,你也可以用*危机中心*路由单独重定义 `AppComponent`  的模板:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.component.3.ts"  header = "src/app/app.component.ts (template)"  region = "template" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In sum, you can write applications with one, two or more levels of routing.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The link parameters array affords the flexibility to represent any routing depth and
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								any legal sequence of route paths, (required) router parameters, and (optional) route parameter objects.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								总结:你可以用一级、两级或多级路由来写应用程序。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  链接参数数组提供了用来表示任意深度路由的链接参数数组以及任意合法的路由参数序列、必须的路由器参数以及可选的路由参数对象。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								{@a  browser-url-styles}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  location-strategy}
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-05-26 21:28:06 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### Appendix: *LocationStrategy* and browser URL styles
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:15:36 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								### 附录:*LocationStrategy* 以及浏览器 URL 样式
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								When the router navigates to a new component view, it updates the browser's location and history
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								with a URL for that view.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This is a strictly local URL. The browser shouldn't send this URL to the server
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and should not reload the page.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								当路由器导航到一个新的组件视图时,它会用该视图的 URL 来更新浏览器的当前地址以及历史。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								严格来说,这个 URL 其实是本地的,浏览器不会把该 URL 发给服务器,并且不会重新加载此页面。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Modern HTML5 browsers support
							 
						 
					
						
							
								
									
										
										
										
											2017-04-24 20:23:45 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< a  href = "https://developer.mozilla.org/en-US/docs/Web/API/History_API #Adding_and_modifying_history_entries "  title = "HTML5 browser history push-state" > history.pushState</ a > , 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								a technique that changes a browser's location and history without triggering a server page request.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router can compose a "natural" URL that is indistinguishable from
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								one that would otherwise require a page load.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								现代 HTML 5 浏览器支持[history.pushState ](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries ) API, 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								这是一项可以改变浏览器的当前地址和历史,却又不会触发服务端页面请求的技术。
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								路由器可以合成出一个“自然的”URL, 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Here's the *Crisis Center*  URL in this "HTML5 pushState" style:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								下面是*危机中心*的 URL 在“HTML 5 pushState”风格下的样子: 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  format = "nocode" >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  localhost:3002/crisis-center/
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Older browsers send page requests to the server when the location URL changes
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								_unless_ the change occurs after a "#" (called the "hash").
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Routers can take advantage of this exception by composing in-application route
							 
						 
					
						
							
								
									
										
										
										
											2019-10-26 21:35:03 +07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								URLs with hashes. Here's a "hash URL" that routes to the *Crisis Center* .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								老旧的浏览器在当前地址的 URL 变化时总会往服务器发送页面请求……唯一的例外规则是:当这些变化位于“#”( ) `#`  之后,路由器可以获得这条“例外规则”带来的优点。下面是到*危机中心*路由的“hash URL”: 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  format = "nocode" >  
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								  localhost:3002/src/#/crisis -center/
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< / code-example >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The router supports both styles with two `LocationStrategy`  providers:
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器通过两种 `LocationStrategy`  提供商来支持所有这些风格:
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								1.  `PathLocationStrategy` — the default "HTML5 pushState" style. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								   `PathLocationStrategy`  - 默认的策略, 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								1.  `HashLocationStrategy` — the "hash URL" style. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								   `HashLocationStrategy`  - 支持“hash URL”风格。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The `RouterModule.forRoot()`  function sets the `LocationStrategy`  to the `PathLocationStrategy` ,
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								making it the default strategy.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can switch to the `HashLocationStrategy`  with an override during the bootstrapping process if you prefer it.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								`RouterModule.forRoot()`  函数把 `LocationStrategy`  设置成了 `PathLocationStrategy` ,使其成为了默认策略。 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								你可以在启动过程中改写( ) , `HashLocationStrategy`  风格 —— 如果你更喜欢这种。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-07-19 15:00:08 -07:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Learn about providers and the bootstrap process in the
							 
						 
					
						
							
								
									
										
										
										
											2017-04-01 01:57:13 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								[Dependency Injection guide ](guide/dependency-injection#bootstrap ).
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								要学习关于“提供商”和启动过程的更多知识,参见[依赖注入 ](guide/dependency-injection#bootstrap )一章。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-10 16:51:13 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-05-26 21:28:06 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### Which strategy is best?
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-06 13:21:34 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### 哪种策略更好?
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You must choose a strategy and you need to make the right call early in the project.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It won't be easy to change later once the application is in production
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								and there are lots of application URL references in the wild.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你必须选择一种策略,并且在项目的早期就这么干。一旦该应用进入了生产阶段,要改起来可就不容易了,因为外面已经有了大量对应用 URL 的引用。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Almost all Angular projects should use the default HTML5 style.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								It produces URLs that are easier for users to understand.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								And it preserves the option to do _server-side rendering_  later.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								几乎所有的 Angular 项目都会使用默认的 HTML 5 风格。它生成的 URL 更易于被用户理解,它也为将来做**服务端渲染**预留了空间。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Rendering critical pages on the server is a technique that can greatly improve
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								perceived responsiveness when the app first loads.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								An app that would otherwise take ten or more seconds to start
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								could be rendered on the server and delivered to the user's device
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								in less than a second.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								在服务器端渲染指定的页面,是一项可以在该应用首次加载时大幅提升响应速度的技术。那些原本需要十秒甚至更长时间加载的应用,可以预先在服务端渲染好,并在少于一秒的时间内完整呈现在用户的设备上。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								This option is only available if application URLs look like normal web URLs
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								without hashes (#) in the middle.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								只有当应用的 URL 看起来像是标准的 Web URL, ( 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Stick with the default unless you have a compelling reason to
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								resort to hash routes.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								除非你有强烈的理由不得不使用 hash 路由,否则就应该坚决使用默认的 HTML 5 路由风格。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								#### The *<base href>*
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### *<base href>* 标签
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								The router uses the browser's
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< a  href = "https://developer.mozilla.org/en-US/docs/Web/API/History_API #Adding_and_modifying_history_entries "  title = "HTML5 browser history push-state" > history.pushState</ a >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								for navigation. Thanks to `pushState` , you can make in-app URL paths look the way you want them to
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								look, e.g. `localhost:4200/crisis-center` . The in-app URLs can be indistinguishable from server URLs.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器使用浏览器的 < a  href = "https://developer.mozilla.org/en-US/docs/Web/API/History_API #Adding_and_modifying_history_entries "  title = "HTML5 browser history push-state" > history.pushState</ a >  API 进行导航。借助 `pushState`  你可以让应用中的 URL 路径看上去就像你期望的那样,比如 `localhost:4200/crisis-center` ,应用内的 URL 和服务器的 URL 没有区别。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Modern HTML5 browsers were the first to support `pushState`  which is why many people refer to these URLs as
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								"HTML5 style" URLs.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								现代的 HTML5 浏览器都支持 `pushState` ,这也就是为什么很多人把这种 URL 形式称为 "HTML 5" 风格的 URL。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< div  class = "alert is-helpful" >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								HTML5 style navigation is the router default.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								In the [LocationStrategy and browser URL styles ](#browser-url-styles ) Appendix,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								learn why HTML5 style is preferred, how to adjust its behavior, and how to switch to the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								older hash (#) style, if necessary.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								路由器默认使用 HTML5 风格的导航。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
										 
							
							
								在附录中的 [LocationStrategy 与浏览器 URL 风格 ](#browser-url-styles )中,你可以了解为何推荐使用 HTML5 风格的 URL, , ( 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< / div >  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You must **add a
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< a  href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"  title = "base href" > < base href>  element< / a > ** 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								to the app's `index.html`  for `pushState`  routing to work.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The browser uses the `<base href>`  value to prefix *relative*  URLs when referencing
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								CSS files, scripts, and images.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你必须在应用的 `index.html`  中**添加一个 < a  href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"  title = "base href" > < base href>  元素</ a > **才能让 `pushState`  路由正常工作。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								浏览器要用 `<base href>`  的值为引用 CSS、脚本和图片文件时使用的*相对* URL 添加前缀。
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Add the `<base>`  element just after the  `<head>`  tag.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								If the `app`  folder is the application root, as it is for this application,
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								set the `href`  value in ** `index.html` ** *exactly*  as shown here.
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-10-21 17:44:10 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								请把 `<base>`  元素添加在 `<head>`  标签的紧后面。如果应用的根目录是 `app`  目录,那么就可以像这个应用程序一样,设置 ** `index.html` ** 中的 `href`  值。代码如下。
							 
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/index.html"  header = "src/index.html (base-href)"  region = "base-href" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-10-23 08:11:51 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-05-26 21:28:06 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### HTML5 URLs and the  *<base href>*
  
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### HTML 5 URL 与*<base href>*
  
						 
					
						
							
								
									
										
										
										
											2017-10-12 17:51:55 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								While the router uses the
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								< a  href = "https://developer.mozilla.org/en-US/docs/Web/API/History_API #Adding_and_modifying_history_entries "  title = "Browser history push-state" > HTML5 pushState</ a >  
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								style by default, you *must*  configure that strategy with a **base href** .
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-22 17:18:48 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								由于路由器默认使用“< a  href = "https://developer.mozilla.org/en-US/docs/Web/API/History_API #Adding_and_modifying_history_entries "  target = "_blank"  title = "Browser history push-state" > HTML 5 pushState</ a > ”风格,所以你*必须*用一个**base href**来配置该策略( ) 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								The preferred way to configure the strategy is to add a
							 
						 
					
						
							
								
									
										
										
										
											2017-04-24 20:23:45 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< a  href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"  title = "base href" > < base href>  element< / a >  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								tag in the `<head>`  of the `index.html` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								配置该策略的首选方式是往 `index.html`  的 `<head>`  中添加一个[<base href> element ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base )标签。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/index.html"  header = "src/index.html (base-href)"  region = "base-href" > < / code-example >  
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Without that tag, the browser may not be able to load resources
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								(images, CSS, scripts) when "deep linking" into the app.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Bad things could happen when someone pastes an application link into the
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								browser's address bar or clicks such a link in an email.
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								如果没有此标签, , ( ) , 
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								Some developers may not be able to add the `<base>`  element, perhaps because they don't have
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								access to `<head>`  or the `index.html` .
							 
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								有些开发人员可能无法添加 `<base>`  元素,这可能是因为它们没有访问 `<head>`  或 `index.html`  的权限。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								Those developers may still use HTML5 URLs by taking two remedial steps:
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								它们仍然可以使用 HTML 5 格式的 URL, : 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								1.  Provide the router with an appropriate [APP_BASE_HREF][] value. 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-03 21:06:01 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								   用适当的[APP_BASE_HREF][]值提供( ) 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-03-11 13:44:25 +00:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								1.  Use _root URLs_  for all web resources: CSS, images, scripts, and template HTML files. 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2018-03-20 17:09:18 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
										 
							
							
								   对所有 Web 资源使用**绝对地址**: 
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-04-30 22:10:32 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								{@a  hashlocationstrategy}
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-05-26 21:28:06 +02:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### *HashLocationStrategy*
  
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-08-04 14:06:15 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								#### *HashLocationStrategy* 策略
  
						 
					
						
							
								
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								You can go old-school with the `HashLocationStrategy`  by
							 
						 
					
						
							
								
									
										
										
										
											2019-01-22 14:11:35 -05:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								providing the `useHash: true`  in an object as the second argument of the `RouterModule.forRoot()` 
							 
						 
					
						
							
								
									
										
										
										
											2017-02-22 18:09:39 +00:00 
										
									 
								 
							 
							
								
							 
							
								 
							
								
									
								 
							
							
								in the `AppModule` .
							 
						 
					
						
							
								
									
										
										
										
											2017-03-27 16:08:53 +01:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-06-04 21:48:02 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								你可以在根模块的 `RouterModule.forRoot()`  的第二个参数中传入一个带有 `useHash: true`  的对象,以回到基于 `HashLocationStrategy`  的传统方式。
							 
						 
					
						
							
								
									
										
										
										
											2017-07-23 11:51:25 +08:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								
							 
						 
					
						
							
								
									
										
										
										
											2019-07-20 20:40:17 +03:00 
										
									 
								 
							 
							
								
									
										 
								
							 
							
								 
							
								
									
								 
							
							
								< code-example  path = "router/src/app/app.module.6.ts"  header = "src/app/app.module.ts (hash URL strategy)" > < / code-example >