第一个 Angular 项目

第一个 Angular 项目 - 添加路由

news2025/1/21 3:03:56

第一个 Angular 项目 - 添加路由

前置项目是第一个 Angular 项目 - 添加服务，之前的切换页面使用的是 ngIf 对渲染的组件进行判断，从而完成渲染。这一步的打算是添加路由，同时添加 edit recipe 的功能(同样通过路由实现)

用到的内容为：

[Angular 基础] - routing 路由(上)
[Angular 基础] - routing 路由(下)

配置基础路由

这里修改的文件有以下文件：

在这里插入图片描述

其中：

header
recipe-details
recipe-item

三个 HTML Template 修改的内容为删除 a 标签中的 href 属性，并添加 style="cursor: pointer" 维持原本的样式，这里不多赘述

其他修改如下：

app-routing

const appRoutes: Routes = [
  { path: '', redirectTo: '/recipes', pathMatch: 'full' },
  { path: 'recipes', component: RecipesComponent },
  { path: 'shopping-list', component: ShoppingListComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

这里主要的修改在 routing 两篇笔记中都提过，最低层次的配置需求需要包含路径和对应的组件，redirectTo 中使用 pathMatch 因为 Angular 的路由是通过前缀匹配的，如果不添加这个属性，那么从首页登陆就会 infinite loop，从而报错

app V 层

删除原本的 ngIf 部分，替换为 <router-outlet></router-outlet>
app module

imports 中新增 AppRoutingModule

实现后效果如下：

在这里插入图片描述

添加子路由

设置如下：

const appRoutes: Routes = [
  {
    path: 'recipes',
    component: RecipesComponent,
    children: [
      { path: '', component: RecipeStartComponent },
      { path: 'new', component: RecipeEditComponent },
      { path: ':id', component: RecipeDetailComponent },
      { path: ':id/edit', component: RecipeEditComponent },
    ],
  },
];

实现后效果如下：

在这里插入图片描述

这里基本上没什么特别难的，唯一需要注意的就是 :id 和 new 的顺序。:id 也算是一个 wildcard，它会将所有的参数都默认为变量名为 id 的值，并且传到 Params 里去

修改获取 recipe

这里是 recipe details 的实现，修改如下：

export class RecipeDetailComponent implements OnInit {
  recipeId: string;
  activeRecipe: Recipe;

  constructor(
    private ingredientService: IngredientService,
    private recipeService: RecipeService,
    private activatedRouter: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.activatedRouter.params.subscribe((params: Params) => {
      this.recipeId = params.id;
      this.activeRecipe = this.recipeService.getRecipeById(this.recipeId);
    });
  }
}

service 中的实现就是返回 array 中的数据就是了，这里实现不多赘述

其他需要做的地方就是 recipe-list 中传值的 onSelect，以及对应的数据传输(@Input & @Output)

动态拼接路由

当前项目还是一个 dummy 项目，所以没法做到直接从 recipe 中获取 id，所以这里要做的就是从 ngFor 中将 index 传到下一个组件，并且在下一个组件中获取 id：

recipe list 修改：

<app-recipe-item
  *ngFor="let recipe of recipes; let i = index"
  [recipe]="recipe"
  [id]="i + 1"
></app-recipe-item>

recipe item 修改：

<a
  style="cursor: pointer"
  [routerLink]="[id]"
  routerLinkActive="active"
  class="list-group-item clearfix"
></a>

对应的 @Input 绑定就不实现了，这部分内容在 [Angular 基础] - 自定义事件 & 自定义属性中；ngFor 的复习在 [Angular 基础] - 指令(directives)

此时的实现如下：

在这里插入图片描述

可以看到和之前的实现基本没有变化，除了 URL 路径的变动

edit recipe 实现

具体的功能会等到学完表单再实现，不过这里通过 ngOnInit 简单的判断一下当前页面是新建页面还是编辑页面：

@Component({
  selector: 'app-recipe-edit',
  templateUrl: './recipe-edit.component.html',
  styleUrl: './recipe-edit.component.css',
})
export class RecipeEditComponent implements OnInit {
  id: number;
  editMode = false;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.id = +params.id;
      this.editMode = isNaN(this.id);
    });
  }
}