AngularDart 4.0 高级-路由概述

时间 2019-11-18

标签 angulardart 4.0 高级路由概述栏目系统网络繁體版

原文原文链接

这是路由器页面的DRAFT，它仍在积极更新。大部份内容都是准确的，但样本仍在改进和加强。欢迎反馈。html

当用户执行应用程序任务时，Angular路由器支持从一个视图导航到下一个视图。java

本指南涵盖路由器的主要功能，经过演示能够实时运行的小应用程序（查看源代码）演示它们。git

概观

浏览器是一种熟悉的应用程序导航模型：github

在地址栏中输入一个URL，而后浏览器导航到相应的页面。
点击页面上的连接，浏览器导航到新页面。
点击浏览器的后退和前进按钮，浏览器会先后浏览您浏览过的网页的历史记录。

Angular路由器借鉴了这种模式。它能够将浏览器URL解释为导航到客户端生成视图的指令。它能够将可选参数传递给支持视图组件，以帮助肯定要呈现的具体内容。您能够将路由器绑定到页面上的连接，并在用户单击连接时导航到适当的应用程序视图。当用户点击按钮，从下拉框中选择，或者响应来自任何来源的其余刺激时，您均可以进行命令式导航。而且路由器在浏览器的历史记录中记录活动，因此后退和前进按钮也起做用。web

设置概述

添加angular_router

路由器功能位于angular_router库中，该库自带软件包。将该包添加到pubspec依赖项中：api

pubspec.yaml (dependencies)浏览器

dependencies:
  angular: ^4.0.0
  angular_router: ^1.0.2

在任何使用路由器功能的Dart文件中，导入路由器库：app

import 'package:angular_router/angular_router.dart';

注册提供者和列表指令

若是您已经熟悉Angular路由，请提醒您须要作什么：ide

选择一个位置策略。
在引导您的应用时注册适当的路由器提供商。
确保每一个路由组件都具备列出组件使用的路由器指令的元数据。

有关详细信息，请参阅声明路由器提供程序和指令。模块化

基本功能概述

本指南分阶段进行，以里程碑为标志，从简单的双页面和建筑开始，走向带有子路由的模块化多视图设计。核心路由器概念的这一律述将有助于您定位后面的细节。

<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挂钩。在离开当前视图导航以前，挂钩使您有机会清理或询问用户的许可。