本篇內(nèi)容介紹了“如何在Angular 12中使用Router瀏覽視圖”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)與策劃設(shè)計,云南網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:云南等地區(qū)。云南做網(wǎng)站價格咨詢:18980820575

先決條件

為了能夠繼續(xù)執(zhí)行本文的演示，您應(yīng)該具備以下條件：

• VS Code之類的集成開發(fā)環(huán)境（IDE）

• 您的計算機上安裝Node version 11.0

• Node Package Manager 6.7版（通常隨Node安裝一起提供）

• Angular CLI v8.0及以上版本

• Angular的最新版本（版本12）：

ng version

確認(rèn)您正在使用v12，如果沒有，請更新至v12版本。

如何在視圖之間導(dǎo)航？

構(gòu)建SPA（單頁應(yīng)用程序）的神奇之處之一就是能夠擁有多個視圖。 使用Angular使此操作非常容易，因為您可以通過導(dǎo)航工具在一個組件中動態(tài)顯示多個視圖。 您可以從主頁到“關(guān)于”頁面，再到“與我們聯(lián)系”頁面，全部集中在一個組件中。

為什么路由很重要？

想象一個場景，您從SPA中的一個視圖轉(zhuǎn)到另一個視圖，但URL完全沒有改變。 就像您單擊“關(guān)于我們”按鈕一樣，頁面顯示在DOM中，但URL仍然顯示“ newapp.com”而不是“ newapp.com/about”。

這存在一些問題，第一是如何將特定的視圖添加為書簽，看到書簽保存URL而不是應(yīng)用程序視圖？其他問題是由于URL基本上是靜態(tài)的，刷新頁面的概念將如何工作以及如何與其他人共享鏈接。

路由確保URL與顯示的視圖匹配，以便您可以輕松地分離視圖，保持狀態(tài)甚至具有直觀的Web體驗。

什么是Angular Router？

Angular Router是由Angular團(tuán)隊構(gòu)建和維護(hù)的JavaScript路由器，它具有廣泛的路由包，可讓您準(zhǔn)確定義要分配給視圖的URL字符串。 您可以有多個路由器出口，路徑匹配甚至路由防護(hù)。 這是Angular重要組成部分，可確?？梢允褂迷摽蚣茌p松構(gòu)建SPA。

我們要構(gòu)建什么？

我們將構(gòu)建一個小型音樂電視應(yīng)用程序，當(dāng)您單擊連接它們的按鈕時，它將顯示兩個視圖，如下所示：

配置

首先，打開VS Code，然后在終端中使用以下命令創(chuàng)建一個新的angular應(yīng)用程序：

ng new newap --routing

添加路由標(biāo)記會自動創(chuàng)建一個名為newapp的新Angular應(yīng)用，并預(yù)先配置路由。

現(xiàn)在更改目錄，使用以下命令導(dǎo)航到應(yīng)用程序根文件夾：

cd newapp

兩個組件

接下來要做的是生成新的組件，該組件將容納計劃在其間交替的兩個視圖。

ng generate component artists -it -is
ng generate component records -it -is

這兩個命令會在源代碼的應(yīng)用程序文件夾中使用內(nèi)聯(lián)樣式和模板創(chuàng)建一個名為Artists and Records的新文件夾，默認(rèn)情況下類似于Vue.js。 接下來要做的是配置路由以適配我們的需求。

配置路由

要配置路由器，請將下面的代碼塊復(fù)制到您的app-routing.module.ts文件中：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ArtistsComponent } from './artists/artists.component';
import { RecordsComponent } from './records/records.component';
const routes: Routes = [
{path:'artists', component:ArtistsComponent},
{path:'records', component:RecordsComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const ArrayOfComponents = [ArtistsComponent, RecordsComponent]

首先，導(dǎo)入了兩個組件； 然后配置路由。請注意，如何將所需的URL字符串定義為Artists和Records，并將它們與兩個組件進(jìn)行匹配？為了不繼續(xù)在其他可能需要的地方導(dǎo)入組件，我們創(chuàng)建了一個組件數(shù)組。

要注冊此新開發(fā)項目，請打開您的應(yīng)用模塊文件，然后在下面的代碼塊中進(jìn)行復(fù)制：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule, ArrayOfComponents } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
ArrayOfComponents
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

在這里我們注冊了新的組件數(shù)組，如您所見，不再需要將兩個組件導(dǎo)入數(shù)組中，這是保持代碼正確維護(hù)的好方法。

路由器鏈接

接下來要做的是構(gòu)建應(yīng)用模板本身，路由器鏈接是Angular路由器的一部分，用于指示鏈接 - 當(dāng)您要指向視圖時，它在模板內(nèi)至關(guān)重要。 在應(yīng)用程序組件HTML文件中，將內(nèi)容替換為以下代碼塊：

This is your Music TV