Angular 5子路由传参求助：从Contentful CMS取ID遇报错

Hey there, let's work through this together—setting up dynamic routes with Contentful can trip up even experienced devs when you're doing it for the first time. Let's break down the most common issues that might be causing your errors, step by step:

First, make sure your child route is properly nested and includes the dynamic :id parameter. A mistake here will throw routing errors right away.

Your routes should look something like this:

import { RouterModule, Routes } from '@angular/router';
import { Week1Component } from './week-1/week-1.component';
import { AssetPageComponent } from './asset-page/asset-page.component';

const routes: Routes = [
  {
    path: 'week-1',
    component: Week1Component,
    // 子路由要嵌套在children数组里
    children: [
      { 
        path: 'asset/:id', // :id是动态参数，会匹配任何字符串这里
        component: AssetPageComponent 
      }
    ]
  }
];

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

• Ensure you've imported RouterModule and added it to the imports array.
• Double-check that the parent route path matches what you're using in your app (no typos like week1 instead of week-1).

When linking to the child route, you need to pass the correct Contentful ID (remember, Contentful stores IDs in the sys.id field, not a top-level id property). Also, use relative routing with routerLink to avoid path issues:

<!-- 假设你有一个从Contentful获取的assets数组 -->
<div *ngFor="let asset of assets">
  <!-- 用相对路径 + 传递sys.id -->
  <a [routerLink]="['./asset', asset.sys.id]">View {{ asset.fields.title }}</a>
</div>

• If you're seeing a "cannot read property 'sys' of undefined" error, add the safe navigation operator: asset?.sys.id to handle unloaded data.
• Avoid hardcoding paths—using relative links (./) ensures your route works even if the parent path changes.

Angular recommends using paramMap (instead of the old params object) to get dynamic route parameters. Make sure you're subscribing to it (since parameters can change if the user navigates to another asset without reloading the page):

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ContentfulService } from '../contentful.service';
import { Asset } from 'contentful'; // 导入Contentful的Asset类型

@Component({
  selector: 'app-asset-page',
  templateUrl: './asset-page.component.html',
  styleUrls: ['./asset-page.component.css']
})
export class AssetPageComponent implements OnInit {
  asset: Asset | undefined;

  constructor(
    private route: ActivatedRoute,
    private contentfulService: ContentfulService
  ) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      const assetId = params.get('id');
      // 先检查ID是否存在，避免空值调用
      if (assetId) {
        this.contentfulService.getAssetById(assetId).subscribe(fetchedAsset => {
          this.asset = fetchedAsset;
        });
      }
    });
  }
}

• If you're getting TypeScript errors, make sure you've imported the correct types from Contentful (e.g., Asset for media files, Entry for custom content types).
• Don't forget to unsubscribe from the paramMap subscription if you're using Angular versions before 16 (you can use takeUntil or async pipe to avoid memory leaks).

This is a super common spot for errors—mixing up Contentful's getAsset and getEntry methods, or misconfiguring your client:

import { Injectable } from '@angular/core';
import { createClient, Asset } from 'contentful';

@Injectable({ providedIn: 'root' })
export class ContentfulService {
  // 确保你的Space ID和Access Token是正确的（从Contentful dashboard获取）
  private contentfulClient = createClient({
    space: 'YOUR_SPACE_ID',
    accessToken: 'YOUR_DELIVERY_ACCESS_TOKEN'
  });

  // 获取Asset（图片、文件等）用getAsset
  getAssetById(assetId: string) {
    return this.contentfulClient.getAsset(assetId);
  }

  // 如果是获取自定义内容类型的条目，用getEntry
  getEntryById(entryId: string) {
    return this.contentfulClient.getEntry(entryId);
  }
}

• If you're trying to load a custom content type (not a media asset), use getEntry instead of getAsset—using the wrong method will throw a 404 from the Contentful API.
• Double-check your Space ID and Delivery Access Token (they're case-sensitive!).

• TSLint Errors: These are usually syntax/type issues. For example:
  • "Property 'sys' does not exist on type 'any'" → Add proper types to your Contentful objects (e.g., assets: Asset[];).
  • "Variable 'assetId' is used before being assigned" → Add a null check like if (assetId) before using it.
• Console Errors:
  • "Cannot match any routes" → Your routerLink path doesn't match the route configuration (check for typos in path names).
  • "Contentful API 404" → Wrong ID, wrong method (getAsset vs getEntry), or invalid Space/Token.
  • "Cannot read property 'fields' of undefined" → Your asset variable is still undefined when the template loads—use *ngIf="asset" or the safe navigation operator (asset?.fields.title).

If you're still stuck, share the exact error messages from your console/TSLint and snippets of the code that's failing—this will help narrow down the problem even faster!

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