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

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

先決條件

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

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

• 您的計(jì)算機(jī)上安裝Node version 11.0

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

• Angular CLI v8.0及以上版本

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

ng version

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

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

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

為什么路由很重要？

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

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

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

什么是Angular Router？

Angular Router是由Angular團(tuán)隊(duì)構(gòu)建和維護(hù)的JavaScript路由器，它具有廣泛的路由包，可讓您準(zhǔn)確定義要分配給視圖的URL字符串。 您可以有多個(gè)路由器出口，路徑匹配甚至路由防護(hù)。 這是Angular重要組成部分，可確保可以使用該框架輕松構(gòu)建SPA。

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

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

配置

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

ng new newap --routing

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

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

cd newapp

兩個(gè)組件

接下來(lái)要做的是生成新的組件，該組件將容納計(jì)劃在其間交替的兩個(gè)視圖。

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

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

配置路由

要配置路由器，請(qǐng)將下面的代碼塊復(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)入了兩個(gè)組件； 然后配置路由。請(qǐng)注意，如何將所需的URL字符串定義為Artists和Records，并將它們與兩個(gè)組件進(jìn)行匹配？為了不繼續(xù)在其他可能需要的地方導(dǎo)入組件，我們創(chuàng)建了一個(gè)組件數(shù)組。

要注冊(cè)此新開(kāi)發(fā)項(xiàng)目，請(qǐng)打開(kāi)您的應(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 { }

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

路由器鏈接

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

<div class="car">
<div >
<h2>
This is your Music TV
</h2>
</div>
<nav >
<button routerLink='/artists'>Artists</button>
<button routerLink='/records'>Records</button>
</nav>
<router-outlet></router-outlet>
</div>

當(dāng)單擊 “Artists” 按鈕時(shí)，將視圖更改為Artists組件，并且在單擊 “Records”按鈕時(shí)，也進(jìn)行了同樣的操作。

收尾

要向應(yīng)用添加某種樣式以使其突出，請(qǐng)打開(kāi)應(yīng)用組件CSS文件并在其中復(fù)制以下規(guī)則：

.car {
top: 50%;
text-align: center;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 600px;
height: 250px;
margin-left: 25%;
margin-bottom: 15px;
}

button {
top: 50%;
text-align: center;
border-radius: 15px;
border: 2px solid #73AD21;
width: fit-content;
margin: 20px;
padding: 20px;
}

保存所有這些文件，并使用以下命令在開(kāi)發(fā)服務(wù)器上運(yùn)行該應(yīng)用程序：

ng serve

您將看到它的運(yùn)行與上面顯示的完全相同。

“如何在Angular 12中使用Router瀏覽視圖”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站標(biāo)題：如何在Angular12中使用Router瀏覽視圖
網(wǎng)站鏈接：http://www.chinadenli.net/article42/igpshc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、軟件開(kāi)發(fā)、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)