了解 Angular 7 中的路由器状态：通过 Angular RouterState 传递数据

ng 新的我的博客应用程序

ng gc 主页ng GC 类别ng gc 博客分类

ng g 服务服务/主要

[
 {
   “编号”：1，
   “名称”：“应用程序开发”
 },
 {
   “编号”：2，
   "name":"区块链开发"
 },
 {
   “编号”：3，
   “名称”：“加密货币”
 },]

[
 {
   "title": "如何为开源做出贡献？",
   "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!",
   “关键字”：“开源，软件，贡献”，
   "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!",
   “类别”：“开源”
 },
 {
   "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!",
   “关键词”：“角度，angular.js，反应，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!",
   “类别”：“网络开发”
 },
 {
   "title":"Objective C or Swift，iOS开发该选什么",
   "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, 软件, 移动开发",
   "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!",
   “类别”：“应用程序开发”
 },]

从'@angular/common/http'导入{HttpClient}；从'@angular/core'导入{Injectable}；从'rxjs'导入{Observable}；
 @Injectable({
 providedIn：“根”})
 导出类 MainService {
 
 构造函数（私有 http: HttpClient）{ }
 
 getAllCategories() {
   返回 this.http.get('assets/categories.json');
 }
 
 getBlogByCategory()：可观察{
   返回 this.http.get('assets/blog-list.json');
 }}

从'@angular/core'导入{NgModule}；从 '@angular/router' 导入 { RouterModule, Routes };从'./blogs-by-category/blogs-by-category.component'导入{BlogsByCategoryComponent}；从'./categories/categories.component'导入{CategoriesComponent}；
 常量路线：路线= [
 {
   // 将重定向到类别页面的空路径。
   小路： ''，
   重定向到：'家'，
   路径匹配：'完整'
 },
 {
   // 显示博客的主页组件
   路径：'家'，
   组件：HomeComponent
 },
 {
   // 显示博客类别列表
   路径：'类别'，
   组件：CategoriesComponent
 },
 {
   // 显示所选类别的博客列表
   路径：“博客分类”，
   组件：BlogsByCategoryComponent
 }];
 @NgModule({
 导入：[RouterModule.forRoot(routes)],
 导出：[RouterModule]})导出类 AppRoutingModule { }

<标头类="标头">
 <h2 class="logo"><a routerLink="/">我的博客</a></h2>
 <ul class="主导航">
   <li><a routerLink="/">首页</a></li>
   <li><a routerLink="categories">类别</a></li>
   <li><a href="#">服务</a></li>
   <li><a href="#">关于我们</a></li>
 </ul></标题>
 <路由器插座></路由器插座>

<div class="欢迎文本">
 <h3>欢迎来到我的博客，请为要显示的博客内容选择一个<em><a routerLink="/categories">类别</a></em>。</h3></div>

<ul>
  <li *ngFor="let category of categories">
    <a routerLink="/blogs-by-category" [state]="category">{{category.name}}</a>
  </li></ul>

从'@angular/core'导入{Component，OnInit}；从'../services/main.service'导入{MainService}；
 界面分类{
 名称：字符串；}
 @成分（{
 选择器：“应用类别”，
 templateUrl: './categories.component.html',
 styleUrls: ['./categories.component.css']})
 导出类 CategoriesComponent 实现 OnInit {
 公共类别：Categories[] = [];
 构造函数（私有mainService：MainService）{}
 
 
 ngOnInit(): void {
   // 在组件加载时调用下面的方法来加载服务。
   this.getAllCategories();
 }
 
 getAllCategories() {
   // 我们正在订阅服务以获取可用类别列表。
   this.mainService.getAllCategories().subscribe((listCategories: any) => this.categories.push(...listCategories));
 }}

<!-- 这里我们循环遍历每个博客对象以在 html 上显示 --><div *ngFor="让博客成为博客">
 <h3>{{blog.title}}</h3>
 <p>{{blog.description}}</p></div>

从'@angular/core'导入{Component，OnInit}；从'../services/main.service'导入{MainService}；
 界面博客{
 标题：字符串；
 描述：字符串；
 关键词：字符串；
 元描述：字符串；
 类别：字符串；}
 @成分（{
 选择器：“应用博客按类别”，
 templateUrl: './blogs-by-category.component.html',
 styleUrls: ['./blogs-by-category.component.css']})导出类 BlogsByCategoryComponent 实现 OnInit {
 公共博客：Blog[] = [];
 构造函数（私有mainService：MainService）{}
 
 ngOnInit(): void {
   const selectedCategory = history.state.name // 这里我们得到了我们选择的类别对象，我们使用对象键访问类别的名称。
   this.getBlogsByCategory(selectedCategory);
 }
 
 getBlogsByCategory（类别：字符串）{
   this.mainService.getBlogByCategory()
     .subscribe((博客: 博客[]) => {
       this.blogs.push(...blogs.filter(blog => blog.category === category)); // 根据所选类别进行过滤。
     });
 }
 }

git 克隆 https://github.com/aamita96/my-blog-app.git