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組件，可根據路由導航顯示視圖。