了解 Angular 7 中的路由器狀態(tài)：通過(guò) Angular RouterState 傳遞數(shù)據(jù)
介紹
Angular 應(yīng)用程序分為組件；這些組件有助于將業(yè)務(wù)邏輯劃分為單獨(dú)的文件，以便更好地理解。在使用這種基于組件的架構(gòu)時(shí)，有時(shí)會(huì)發(fā)生一個(gè)組件依賴于另一個(gè)組件進(jìn)行進(jìn)一步處理的情況，因此它將數(shù)據(jù)從一個(gè)組件傳遞到另一個(gè)組件。
我們可以通過(guò)多種方式將數(shù)據(jù)從一個(gè)組件傳遞到另一個(gè)組件。Angular 7.2.0 引入了一種在路由組件之間導(dǎo)航時(shí)使用狀態(tài)對(duì)象傳遞數(shù)據(jù)的新方法。使用狀態(tài)對(duì)象的好處是，您可以使用 routeParams 在路由組件之間共享數(shù)據(jù)，而無(wú)需將其顯示在 URL 段上，這與 Angular 中的 queryParams 不同。
教程目標(biāo)：通過(guò) Angular RouterState 傳遞數(shù)據(jù)
在開(kāi)發(fā)演示應(yīng)用程序之前，讓我們看看演示應(yīng)用程序是關(guān)于什么的。我們將構(gòu)建一個(gè)具有三個(gè)網(wǎng)頁(yè)的博客應(yīng)用程序——主頁(yè)、類別和類別博客。根據(jù)我們的博客標(biāo)題——通過(guò) Angular RouterState 傳遞數(shù)據(jù)，我們將看到如何將數(shù)據(jù)從 Categories 組件傳遞到 Blog by Categories 組件。
查看下面的視頻，了解演示應(yīng)用程序的用戶界面。在視頻中，檢查控制臺(tái)是否有使用 routerState 傳遞的數(shù)據(jù)。
創(chuàng)建角度應(yīng)用程序
要?jiǎng)?chuàng)建一個(gè)新的角度應(yīng)用程序，請(qǐng)鍵入以下命令：-
ng 新的我的博客應(yīng)用程序
注意– 您可以隨意命名它，而不是 my-blog-app。我們將在這里創(chuàng)建一個(gè)示例博客應(yīng)用程序。
回答一系列問(wèn)題以成功創(chuàng)建您的項(xiàng)目。確保選擇 YES – Would you like to add Angular routing ? 這將創(chuàng)建一個(gè)文件app-routing.module.ts，我們將在其中添加我們的項(xiàng)目路由。
配置角度項(xiàng)目
角度項(xiàng)目結(jié)構(gòu)
Angular 生成組件
使用以下命令為博客應(yīng)用程序生成 Home、Categories 和 BlogsByCategory 組件。
ng gc 主頁(yè)ng GC 類別ng gc 博客分類
運(yùn)行命令后，項(xiàng)目結(jié)構(gòu)將類似于
現(xiàn)在我們將創(chuàng)建一個(gè)名為MainService的模擬服務(wù)，以使用以下命令為我們的博客應(yīng)用程序獲取數(shù)據(jù)
ng g 服務(wù)服務(wù)/主要
現(xiàn)在創(chuàng)建兩個(gè)文件：blog-list.json和categories.json用于模擬數(shù)據(jù)，并從我們的主要服務(wù)中獲取這些數(shù)據(jù)。
// 類別.json
[
{
“編號(hào)”：1，
“名稱”：“應(yīng)用程序開(kāi)發(fā)”
},
{
“編號(hào)”：2，
"name":"區(qū)塊鏈開(kāi)發(fā)"
},
{
“編號(hào)”：3，
“名稱”：“加密貨幣”
},]
// 博客列表.json
[
{
"title": "如何為開(kāi)源做出貢獻(xiàn)？",
"description":"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
“關(guān)鍵字”：“開(kāi)源，軟件，貢獻(xiàn)”，
"meta_desc":"lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
“類別”：“開(kāi)源”
},
{
"title":"Angular 與 React 與 Vue.js",
"description":"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
“關(guān)鍵詞”：“角度，angular.js，反應(yīng)，react.js，vue，vue.js”，
"meta_desc":"lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
“類別”：“網(wǎng)絡(luò)開(kāi)發(fā)”
},
{
"title":"Objective C or Swift，iOS開(kāi)發(fā)該選什么",
"description":"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
"keywords":"iPhone, iOS, 軟件, 移動(dòng)開(kāi)發(fā)",
"meta_desc":"lorem, ipsum dolor sit amet consectetur adipisicing elit. Sunt ducimus aliquam nulla nobis quo mollitia rem nisi dolore alias natus dignissimos dolores eum aliquid officiis error dolorem, minima repellat cumque!",
“類別”：“應(yīng)用程序開(kāi)發(fā)”
},]
現(xiàn)在將以下代碼粘貼到服務(wù)中
從'@angular/common/http'導(dǎo)入{HttpClient}；從'@angular/core'導(dǎo)入{Injectable}；從'rxjs'導(dǎo)入{Observable}；
@Injectable({
providedIn：“根”})
導(dǎo)出類 MainService {
構(gòu)造函數(shù)（私有 http: HttpClient）{ }
getAllCategories() {
返回 this.http.get('assets/categories.json');
}
getBlogByCategory()：可觀察{
返回 this.http.get('assets/blog-list.json');
}}
我們將更新以下文件的代碼：
應(yīng)用程序路由.module.ts
主頁(yè).component.ts
類別.component.ts
類別.component.html
博客分類.component.ts
blogs-by-category.component.html
配置路由
在這個(gè)文件中，我們將聲明路由及其各自的組件。因此，應(yīng)用程序?qū)⒅辣仨氃谀臈l路由上呈現(xiàn)哪個(gè)組件。
// app-routing.module.ts
從'@angular/core'導(dǎo)入{NgModule}；從 '@angular/router' 導(dǎo)入 { RouterModule, Routes };從'./blogs-by-category/blogs-by-category.component'導(dǎo)入{BlogsByCategoryComponent}；從'./categories/categories.component'導(dǎo)入{CategoriesComponent}；
常量路線：路線= [
{
// 將重定向到類別頁(yè)面的空路徑。
小路： ''，
重定向到：'家'，
路徑匹配：'完整'
},
{
// 顯示博客的主頁(yè)組件
路徑：'家'，
組件：HomeComponent
},
{
// 顯示博客類別列表
路徑：'類別'，
組件：CategoriesComponent
},
{
// 顯示所選類別的博客列表
路徑：“博客分類”，
組件：BlogsByCategoryComponent
}];
@NgModule({
導(dǎo)入：[RouterModule.forRoot(routes)],
導(dǎo)出：[RouterModule]})導(dǎo)出類 AppRoutingModule { }
基本用戶界面
在本節(jié)中，我們將為我們的基本用戶界面添加以下代碼。
// app.component.html
用以下代碼替換您的 html 文件代碼。
<標(biāo)頭類="標(biāo)頭">
<h2 class="logo"><a routerLink="/">我的博客</a></h2>
<ul class="主導(dǎo)航">
<li><a routerLink="/">首頁(yè)</a></li>
<li><a routerLink="categories">類別</a></li>
<li><a href="#">服務(wù)</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul></標(biāo)題>
<路由器插座></路由器插座>
// home.component.html
<div class="歡迎文本">
<h3>歡迎來(lái)到我的博客，請(qǐng)為要顯示的博客內(nèi)容選擇一個(gè)<em><a routerLink="/categories">類別</a></em>。</h3></div>
現(xiàn)在讓我們進(jìn)入教程的核心部分：通過(guò) Angular RouterState 傳遞數(shù)據(jù)并開(kāi)始在組件之間傳輸數(shù)據(jù)。
傳遞數(shù)據(jù)
更新表面用戶界面后，打開(kāi)與 Categories 組件相關(guān)的文件以更新 UI 并編寫邏輯以將數(shù)據(jù)傳遞給 Blog by Categories 組件。
// 類別.component.html
<ul>
<li *ngFor="let category of categories">
<a routerLink="/blogs-by-category" [state]="category">{{category.name}}</a>
</li></ul>
在這里，在屬性指令 [state]=”object” 的幫助下，我們將數(shù)據(jù)傳遞給另一個(gè)組件。如果您在應(yīng)用程序中依賴聲明式導(dǎo)航，則使用此屬性。
// 類別.component.ts
從'@angular/core'導(dǎo)入{Component，OnInit}；從'../services/main.service'導(dǎo)入{MainService}；
界面分類{
名稱：字符串；}
@成分（{
選擇器：“應(yīng)用類別”，
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.css']})
導(dǎo)出類 CategoriesComponent 實(shí)現(xiàn) OnInit {
公共類別：Categories[] = [];
構(gòu)造函數(shù)（私有mainService：MainService）{}
ngOnInit(): void {
// 在組件加載時(shí)調(diào)用下面的方法來(lái)加載服務(wù)。
this.getAllCategories();
}
getAllCategories() {
// 我們正在訂閱服務(wù)以獲取可用類別列表。
this.mainService.getAllCategories().subscribe((listCategories: any) => this.categories.push(...listCategories));
}}
接收數(shù)據(jù)
現(xiàn)在是時(shí)候更新 Blog by Categories 組件的用戶界面并編寫從 Categories 組件接收數(shù)據(jù)的邏輯了。用以下代碼替換您的.html 和 .ts文件。
// blog-by-categories.component.html
用以下代碼替換您的 html 文件代碼：-
<!-- 這里我們循環(huán)遍歷每個(gè)博客對(duì)象以在 html 上顯示 --><div *ngFor="讓博客成為博客">
<h3>{{blog.title}}</h3>
<p>{{blog.description}}</p></div>
// blog-by-categories.component.ts
從'@angular/core'導(dǎo)入{Component，OnInit}；從'../services/main.service'導(dǎo)入{MainService}；
界面博客{
標(biāo)題：字符串；
描述：字符串；
關(guān)鍵詞：字符串；
元描述：字符串；
類別：字符串；}
@成分（{
選擇器：“應(yīng)用博客按類別”，
templateUrl: './blogs-by-category.component.html',
styleUrls: ['./blogs-by-category.component.css']})導(dǎo)出類 BlogsByCategoryComponent 實(shí)現(xiàn) OnInit {
公共博客：Blog[] = [];
構(gòu)造函數(shù)（私有mainService：MainService）{}
ngOnInit(): void {
const selectedCategory = history.state.name // 這里我們得到了我們選擇的類別對(duì)象，我們使用對(duì)象鍵訪問(wèn)類別的名稱。
this.getBlogsByCategory(selectedCategory);
}
getBlogsByCategory（類別：字符串）{
this.mainService.getBlogByCategory()
.subscribe((博客: 博客[]) => {
this.blogs.push(...blogs.filter(blog => blog.category === category)); // 根據(jù)所選類別進(jìn)行過(guò)濾。
});
}
}
Github 倉(cāng)庫(kù)
您可以直接選擇克隆 github 存儲(chǔ)庫(kù)并使用代碼。運(yùn)行以下命令來(lái)克隆 repo 或訪問(wèn)源代碼。
git 克隆 https://github.com/aamita96/my-blog-app.git
結(jié)論
我希望通過(guò) Angular RouterState 傳遞數(shù)據(jù)的教程對(duì)你有用。如需更多此類教程，請(qǐng)?jiān)L問(wèn)Angular 教程頁(yè)面并隨時(shí)克隆 github 存儲(chǔ)庫(kù)。如果您正在尋找專門的開(kāi)發(fā)人員來(lái)管理您的 Angular 項(xiàng)目或從頭開(kāi)始構(gòu)建它，請(qǐng)聯(lián)系我們聘請(qǐng)Angular 開(kāi)發(fā)人員。我們向您保證，我們技術(shù)嫻熟的開(kāi)發(fā)人員將運(yùn)用他們解決問(wèn)題的能力來(lái)滿足您的所有項(xiàng)目要求。