程式設計師雜談 - 如何使用 MEAN：路由 Angular

藉由Ted Neward |2018 年 9 月

Ted Neward 歡迎回來，同樣地，MEANers。

截至目前為止，我們已完成此動作，儘管所有項目基本上已完成整個範圍內的一個「頁面」。雖然這會讓適合某些單一頁面應用程式 (Spa)、使用者的 Web 應用程式，即使是最複雜的 Web 應用程式（或最複雜的使用者）一般會遵循的一些 Web，例如透過 URL 的協助工具的建立原則。也就是說，我應該是「跳躍」特定部分的應用程式只要在瀏覽器中，輸入適當的 URL，或頁面加入書籤，雖然我，依此類推。瀏覽「內部」應用程式的能力是其中一項特徵就區分從桌上型電腦或行動應用程式的 Web 應用程式，而且應該支援的重要功能。

在較舊且較傳統 Web 應用程式，這由傳統的 ASP.NET 的本質 (或 Java servlet 或 Ruby 上 Rails 或 PHP 或...) 的應用程式：所有項目是個別且不同的網頁已製造的伺服器上，然後傳送至用戶端轉譯。中的 SPA，不過，大部分（若非全部）轉譯都完全用戶端，而且您只有返回伺服器時，您需要的資料，或有叫用一些必須一直保持 tucked 消失（例如修改資料中的共用資料庫伺服器上的行為或可能叫用個別的 Web 服務，立即隱藏代表使用者的防火牆後面)。

因此，在大部分的 SPA 架構，像是 Angular，不同的機制是提供的「範圍」或「分割」頁面界限提供所需。基本上，您需要某種類型的工具或機制來變更「頁面」中的 SPA，基本上拿掉任何元件目前顯示並替換成一組不同的元件，以便給使用者，它看起來像是您已變更的頁面，但是，而不需要進行 HTTP 來回行程，瀏覽至新頁面通常需要。在 Angular，該機制稱為「路由」，而且很 Angular 路由器的責任。（而且您們）。

路由的基本概念

若要進一步掌握路由的運作方式，讓我們假設標準的主版詳細資料樣式的應用程式：第一頁會顯示一份我要興趣（例如在會議的主講人）的項目由某種類型的摘要 (例如姓氏與名字的)。當使用者想要「鑽研」至更詳細顯示單一項目的時，他們將按一下該項目在清單中，我將會顯示更詳細的檢視。Angular 而言，這表示我想要使用的兩個元件： SpeakerListComponent，以顯示講師名稱和 SpeakerComponent，以顯示該講師的完整詳細資料。這是相當標準的主版詳細資料部份，而且更重要的是，無數的商務應用程式的中央裝訂位置。當然，有其他（可能是較好的）方式建置企業 UI 中，但這是用來取得跨核心點 — 我需要了解如何將從 SpeakerListComponent 路由到指定的 SpeakerComponent，並傳遞在所選說話者，雖然我在它。

自然的起點，開始使用路由是使用自己的路由的集合。通常會想要以「主要」的檢視（講師清單），因此讓我們開始，應用程式的首頁。路由是通常是整個應用程式，或至少模組範圍，通常路由定義在 app.module.ts 檔案中，以建構「 @angular/routing 」模組從匯入路由物件：

const appRoutes: Routes = [
  { path: 'speakers', component: SpeakerlistComponent }
];

請注意，路由看基本上相同，它們看起來在其他 Web 技術，例如 ASP.NET MVC 或甚至 Ruby 上 Rails。為路由的本質，應該會顯示元件的 URL 路徑（不含前置的斜線）的對應。因此，在此案例中，當使用者導覽到「 http://localhost:4200//喇叭，「它們都會獲得參加會議的主講人的清單。

為什麼起來，我想要的"/"的路徑，將重新導向至「喇叭」路由，以便來到「首頁」會自動重新導向至講師清單，因此我將它加入：

const appRoutes: Routes = [
  { path: 'speakers', component: SpeakerlistComponent },
  { path: '', redirectTo: '/speakers', pathMatch: 'full' }
];

當然，通常所需的其他一件事是某種「糟糕！」頁面，即可顯示是否使用者將由此處不存在的 URL 在您的網站，因此您也需要「萬用」路由，將會顯示 PageNotFoundComponent 必須建置夏天保留:

const appRoutes: Routes = [
  { path: 'speakers', component: SpeakerlistComponent },
  { path: '', redirectTo: '/speakers', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

請注意萬用字元路由並不真正考量任何不同，除了來自」 * *"路徑，但它會故意放在路由表的結尾。這是根據設計，因為評估路由是由上而下，與第一個相符項目"winning"。因此，如果萬用字元路由頂端，您一律顯示保留的夏天工作，不論是否使用者已巡覽至正確的路由或不關閉。

最後，我要設定路由，以顯示個別的說話者，且若要這麼做的典型方式是讓每位演講者，以便使用某一種與其相關聯，如下所示"演講者備忘/1"的說話者識別碼為 1 的唯一識別碼的頁面/路由。設定該路由看起來會類似使用任何熟悉 ASP.NET MVC 或 Rails，同樣地，任何人，您可以使用冒號前面的參數名稱作為中傳遞的實際值的預留位置：

const appRoutes: Routes = [
  { path: 'speaker/:id', component: SpeakerComponent },
  { path: 'speakers', component: SpeakerlistComponent },
  { path: '', redirectTo: '/speakers', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

留在該主體的唯一真正問題是如何 SpeakerComponent 取得的「識別碼」參數;因此而誕生了有趣的故事。

ActivatedRoutes

ActivatedRoute 物件時，路由就會執行並帶入螢幕中的元件，包含路由使用，包括路由參數的相關資訊 (例如": id"稍早所用)。Angular 中大部分的情況，例如 ActivatedRoute 是 injectable 物件，因此您可以詢問它 SpeakerComponent 的建構函式中所示，知道若要顯示，哪些演講者備忘**[圖 1**。

[圖 1 尋求 ActivatedRoute 建構函式

@Component({
  selector: 'app-speaker',
  templateUrl: './speaker.component.html',
  styleUrls: ['./speaker.component.css']
})
export class SpeakerComponent implements OnInit {
  @Input() speaker : Speaker
  constructor(private speakerService: SpeakerService,
    private route: ActivatedRoute) {
  }
  ngOnInit() {
    const speakerId = this.route.snapshot.params['id'];
    this.speaker = this.speakerService.getSpeakerById(speakerId);
  }
}

ActivatedRoute 大量包裝在可觀察的實體，這是有點超過我要進入這裡，因此您只要知道就說取得「快照集」的路由是最簡單的方式，來取得傳遞; 參數從該處我要求的「識別碼」參數和"1"在"/ 演講者備忘/1"交回給我以搭配 SpeakerService。

ActivatedRoute 能透過數個不同的 URL 部分，順便一提，如果您不想知道是否路由，對應的 URL 組件或片段或甚至是查詢參數。簡短的答案是肯定、 ActivatedRoute 可以讓您存取任何部分，您可能想要參數化的 URL 和長的回答是，當然，查看所有詳細資料的 Angular 文件。事實上，路由可以實際上納入任意資料做為一部分的路由，並解決之前路由的啟動過程中，該資料，但這一點最如果我有空間來討論這一版。

路由器輸出」和「連結

遺漏的項目仍？兩個部分：選擇的位置，在 UI 中取得要發揮它的路由器和主機清單和詳細資料元件之間的連結。同時會在範本檔案，而不是 TypeScript 程式碼。

首先，路由器才會出現的最常見的位置通常是根目錄中的應用程式本身;也就是說，應用程式元件通常會定義路由器的各種元件應該出現的位置。事實上，通常是應用程式元件會有路由器的「空間」等括住它的上方，其下的頁尾元件的標頭元件。路由器的「空間」由「路由器輸出」標籤，定義，而且幾乎一律空白，裡面是路由的元件出現的位置，因此我 app.component.html 看起來像這樣：

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<h2>Welcome to our conference</h2>
<router-outlet></router-outlet>
<h6>No speakers are actually going to appear, so...</h6>

當然，會議網站可以執行與改造，但我就留給您的 Web 設計工具。這裡的重點是 SpeakerlistComponent 或 SpeakerComponent，根據其所使用的路由，將會取代「路由器輸出」標記組。

必須完成其他一件事是放入 SpeakerlistComponent 的連結，以便使用者可以按一下說話者的名稱，並引導使用者前往其 [詳細資料] 頁面。若要這樣做最簡單的方式是只需要提供在 SpeakerlistComponent 的範本中的錨點標籤 standard 問題 href 就像這樣：

<div>
  <div *ngFor="let speaker of speakers">
    <a href="/speaker/{{speaker.id}}">
      {{speaker.firstName}} {{speaker.lastName}}</a>
  </div>
</div>

而且，我們有基本的一對多應用程式。

總結

還有許多其他路由的相關探索 — 它是一個更複雜的主題，比我能完全覆蓋這裡。例如，您也可以指定任意的（靜態）「資料」參數時定義的路由集合中，則可以再取得已啟用的路由物件，或者您可以定義 Angular 所謂的「解決防護時，「這可用來執行特定的處理（所選說話者，例如擷取的資料）時仍在建構 UI。一如往常，Angular 文件會提供佈滿詳細資料的人有興趣了解更多。

現在，我們有我們主版詳細資料的方式運作，但就可以開始為我們部分的方式的月份。在下一集中，我們將討論如何使用 Angular 支援自動化的測試來測試此 sucker。在此同時，高興撰寫程式碼！

Ted Neward是西雅圖的 polytechnology 顧問、演說家和 mentor，目前從事的工程設計和開發人員關係在總監Smartsheet.com。他已撰寫了無數的文章，撰寫與合著過十幾個書籍，並在世界各地發表演說。與他連絡ted@tedneward.com或閱讀他的部落格blogs.tedneward.com。

感謝下列技術專家：Garvice Eakins (Smartsheet.com)

MSDN Magazine 論壇中的這篇文章的討論

程式設計師雜談 - 如何使用 MEAN：路由 Angular

路由的基本概念

ActivatedRoutes

路由器輸出 」 和 「 連結

總結

其他資源

路由器輸出」和「連結