AngularDart 4.0 高级-路由概述 顶
AngularDart 4.0 高级-路由概述 顶
这是路由器页面的DRAFT，它仍在积极更新。 大部分内容都是准确的，但样本仍在改进和增强。 欢迎反馈。
当用户执行应用程序任务时，Angular路由器支持从一个视图导航到下一个视图。
本指南涵盖路由器的主要功能，通过演示可以实时运行的小应用程序（查看源代码）演示它们。
概观
浏览器是一种熟悉的应用程序导航模型：
- 在地址栏中输入一个URL，然后浏览器导航到相应的页面。
- 点击页面上的链接，浏览器导航到新页面。
- 点击浏览器的后退和前进按钮，浏览器会前后浏览您浏览过的网页的历史记录。
Angular路由器借鉴了这种模式。 它可以将浏览器URL解释为导航到客户端生成视图的指令。它可以将可选参数传递给支持视图组件，以帮助确定要呈现的具体内容。您可以将路由器绑定到页面上的链接，并在用户单击链接时导航到适当的应用程序视图。当用户点击按钮，从下拉框中选择，或者响应来自任何来源的其他刺激时，您都可以进行命令式导航。并且路由器在浏览器的历史记录中记录活动，所以后退和前进按钮也起作用。
设置概述
添加angular_router
路由器功能位于angular_router库中，该库自带软件包。 将该包添加到pubspec依赖项中：
pubspec.yaml (dependencies)
dependencies:
angular: ^4.0.0
angular_router: ^1.0.2在任何使用路由器功能的Dart文件中，导入路由器库：
import 'package:angular_router/angular_router.dart';注册提供者和列表指令
如果您已经熟悉Angular路由，请提醒您需要做什么：
- 选择一个位置策略。
- 在引导您的应用时注册适当的路由器提供商。
- 确保每个路由组件都具有列出组件使用的路由器指令的元数据。
有关详细信息，请参阅声明路由器提供程序和指令。
基本功能概述
本指南分阶段进行，以里程碑为标志，从简单的双页面和建筑开始，走向带有子路由的模块化多视图设计。 核心路由器概念的这一概述将有助于您定位后面的细节。
<base href>
大多数路由应用程序在index.html <head>中都有一个<base href =“...”>元素来告诉路由器如何编写导航网址。 有关详细信息，请参阅设置基础href。
配置
当浏览器的URL更改时，路由器会查找相应的RouteDefinition，从中可以确定要显示的组件。
直到您配置它，路由器才有路由。 以下示例创建一些路由定义。 它演示了同时创建路由器并使用应用于路由器宿主组件的@RouteConfig添加路由的首选方式：
lib/app_component.dart (routes)
@Component(
selector: 'my-app',
// ···
)
@RouteConfig(const [
const Route(
path: '/crisis-center',
name: 'CrisisCenter',
component: CrisisCenterComponent),
const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
])
class AppComponent {}RouteDefinition有几种风格。 最常见的，如上所示，是一个命名的路由，它将URL路径映射到组件。
路由器插座
当此应用的浏览器URL成为/#/heroes时，路由器将该URL与名为Heroes的RouteDefinition匹配，并在放置在宿主视图HTML中的RouterOutlet后显示HeroesComponent。
<router-outlet></router-outlet>
<!-- Routed views go here -->路由链接
现在，您已经配置了路由并提供了一个渲染它们的地方，但您如何导航？ 该URL可以直接从浏览器地址栏中获得。 但是大多数情况下，由于某些用户操作（如点击锚标签）迫使您导航。
考虑以下模板：
lib/app_component.dart (template and styles)
template: '''
<h1>Angular Router</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
''',
styles: const ['.router-link-active {color: #039be5;}'],锚标签上的RouterLink指令授予路由控制这些元素。将每个RouterLink指令绑定到一个模板表达式，该模板表达式将链接参数作为链路参数列表返回。 路由将每个链接参数列表解析为完整的URL。
RouterLink指令还有助于在视觉上区分当前所选活动路线的锚点。当关联的路由链接变为活动状态时，路由将router-link-active CSS类添加到元素。如上所示，您可以在AppComponent的@Component注解中将该样式与模板一起定义。
概要
该应用程序具有配置的路由。 外壳组件有一个RouterOutlet，它可以显示路由产生的视图。 它具有RouterLink，用户可以通过路由点击进行导航。
以下是关键路由术语及其含义：
路由器组成部分 | 涵义 |
|---|---|
Router | 显示活动URL的应用程序组件。 管理从一个组件到下一个组件的导航。 |
@RouteConfig | 使用RouteDefinition列表配置路由。 |
RouteDefinition | 定义路由如何根据URL模式导航到组件。 |
Route | 一种RouteDefinition。 定义路由器如何根据URL模式导航到组件。 大多数路由由路径，路由名称和组件类型组成。 |
RouterOutlet | 指示路由应该显示视图的指令（<router-outlet>）。 |
RouterLink | 将可点击HTML元素绑定到路由的指令。 单击具有绑定到链接参数列表的routerLink指令的元素会触发导航。 |
Link parameters list | 路由将其解释为路由指令的列表。 您可以将该列表绑定到RouterLink或将该列表作为参数传递给Router.navigate方法。 |
Routing component | 一个带有RouterOutlet的Angular组件，可根据路由导航显示视图。 |
示例应用程序
本指南介绍了多页面路由示例应用程序的开发。 一路上，它突出了设计决策并描述了路由的关键特性。
本指南将按照一系列里程碑进行，就像您在逐步构建应用程序一样。 但是，它不是教程，它掩盖了文档中其他地方更全面地介绍的Angular应用程序构建的细节。
应用程序的最终版本的完整源代码可以从实例中查看并下载（查看源代码）。
示例应用程序正在运行
想象一下可以帮助Hero Employment Agency开展业务的应用程序。 英雄需要工作，该机构发现危机让他们解决。
该应用程序具有以下主要功能：
- 一个危机中心，用于维护英雄分配危机清单。
- 一个英雄区域，用于维护该机构雇用的英雄名单。
点击这个实例链接来查看它（查看源代码）。 一旦应用程序启动完成，您将看到一排导航按钮和带有英雄列表的英雄视图。
选择一个英雄，该应用会将您带到英雄编辑屏幕。
改名字。 点击“返回”按钮，应用程序返回英雄列表，显示更改的英雄名称。 注意名称更改立即生效。
如果您点击了浏览器的后退按钮而不是“返回”按钮，该应用程序也会将您返回到英雄列表。 Angular的应用程序像正常的网页导航一样更新浏览器的历史。
现在点击危机中心链接查看正在进行的危机列表。
选择危机，应用程序会将您带入危机编辑屏幕。 危机详情显示在列表下方的同一页面上的子视图中。
改变危机的名称。 请注意危机列表中的相应名称不会更改。
与英雄细节不同，当您键入更新时，危机细节更改是暂时的，直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。
不要单击任一按钮。 点击浏览器后退按钮或“英雄”链接。
向上弹出一个对话框。
您可以选择“OK”并丢失您的更改，或单击“Cancel”并继续编辑。
这种行为的后面是路由的routerCanDeactivate挂钩。 在离开当前视图导航之前，挂钩使您有机会清理或询问用户的许可。