如何通过导航菜单在同一Angular组件渲染不同Strapi集合页面

所有页面全量渲染的核心原因有三个：

• 路由未配置动态参数，无法区分当前访问的是哪个单页
• PageComponent初始化时直接调用全量查询接口拉取了所有Pages数据，模板中还通过*ngFor遍历了全部返回的页面条目
• 导航栏使用原生href属性做跳转，既没有接入Angular路由体系，也没有传递待展示页面的唯一标识

1. 调整路由配置，增加动态页面参数 #

修改app.routing.module.ts，给页面路由加上动态参数，通过URL区分不同页面，推荐用URL友好的slug做参数（比数字ID更适合前台访问，需要先在Strapi的Pages集合中给每个页面加唯一的slug字段，和导航配置的链接对应）：

const routes: Routes = [
  {
    path: '',
    redirectTo: 'page/ratenrechner', // 默认跳转至指定页面，可自行修改
    pathMatch: 'full'
  },
  {
    path: 'page/:pageSlug', // 增加动态路由参数
    component: PageComponent,
  }
];

2. 补充PageService的单页查询方法 #

你已经写了按ID查询的getPage方法，如果用slug查询，补充对应方法即可：

// 按slug查询单页，适配Strapi v4过滤语法
getPageBySlug(slug: string): Observable<Page> {
  return this.http.get<Page>(`${environment.apiUrl}/pages?filters[slug][$eq]=${slug}&populate=*`).pipe(
    map(res => res.data[0]) // 过滤结果中取第一条匹配的页面数据
  );
}

如果导航里存的是页面ID，直接用已有的getPage方法传ID即可。

3. 重写PageComponent逻辑，仅加载当前路由对应页面 #

删掉原来拉取全量数据的逻辑，改为订阅路由参数变化，参数更新时自动拉取对应页面内容：

import { switchMap } from 'rxjs/operators';

export class PageComponent implements OnInit {
  currentPage?: Page; // 仅存储当前需要展示的单页数据

  constructor(private pageSvc: PageService, private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅路由参数，切换页面时自动拉取新数据，无需重复绑定事件
    this.route.paramMap.pipe(
      switchMap(params => {
        const pageIdentifier = params.get('pageSlug');
        // 若使用ID查询，此处改为调用getPage方法传入pageIdentifier即可
        return this.pageSvc.getPageBySlug(pageIdentifier as string);
      })
    ).subscribe(pageData => {
      this.currentPage = pageData;
    });
  }
}

4. 修改页面模板，移除全量遍历逻辑 #

删掉原来的*ngFor遍历代码，直接渲染单页字段即可，因为所有页面结构一致，直接写死结构绑定对应字段：

<div *ngIf="currentPage">
  <h1>{{currentPage.attributes.title}}</h1>
  <!-- 按实际页面结构补充其他字段绑定即可，例如正文、配图等 -->
  <div [innerHTML]="currentPage.attributes.content"></div>
</div>

5. 改造导航栏，接入Angular路由 #

首先在导航栏所属模块中导入RouterModule，再把模板里所有原生href跳转替换为routerLink，避免整页刷新：

<!-- 下拉菜单内的链接 -->
<li *ngFor="let links of dropdownComponents.attributes.links">
  <a [routerLink]="['/page', links.pageSlug]">{{links.label}}</a>
  <!-- 如果导航配置里已经存了拼好的/page/xxx格式路径，直接写[routerLink]="links.url"即可 -->
</li>

<!-- 顶部普通菜单项链接 -->
<li class="nav-item" *ngFor="let sectionComponents of components.data.attributes.body">
  <a class="nav-link" [routerLink]="['/page', sectionComponents.pageSlug]">{{sectionComponents.label}}</a>
</li>

注意需要确保Strapi中导航配置的每个菜单项，都绑定了对应Pages条目的slug或ID，点击时才能拿到正确的路由参数。

• 页面切换时增加loading态，减少用户等待感知
• 若总页面数量不多，可在应用初始化时一次性拉取所有页面数据存在本地服务中，切换路由时直接读取本地数据，减少接口请求
• 增加路由守卫，访问不存在的页面标识时跳转404页

内容的提问来源于stack exchange，提问作者Bartheus