Angular routerLink添加额外URL文本的正确语法是什么？

嘿，我来帮你搞定这个问题！在Angular里，routerLink支持通过数组形式来拼接多个URL分段，不管是静态文本还是动态变量都能轻松处理，而且Angular会自动帮你处理斜杠的拼接，不用手动加。

核心用法：数组形式的routerLink #

你当前的[routerLink]="card.id"是把card.id作为当前路由的下一级路径。如果要添加额外的URL文本，只需要把这些额外部分作为数组的后续元素即可：

1. 添加静态的额外文本

比如你想在卡片ID后面加上details，让最终URL变成http://localhost:4200/dashboard/my-cards/DmJHJJA1e77fEEImKBju/details，写法如下：

<a *ngFor="let card of cards; let i = index" 
   class="list-group-item list-group-item-action d-flex flex-row align-items-start justify-content-between" 
   [routerLink]="[card.id, 'details']"  <!-- 静态文本作为数组第二个元素 -->
   routerLinkActive="active" >
  <div class="d-flex flex-column card-info-container">
    <h4 class="list-group-item-heading">{{card.title}}</h4>
    <!-- 你的其他卡片内容 -->
  </div>
</a>

2. 添加动态的额外文本

如果额外部分也是动态变量（比如卡片的状态card.status），直接把变量放进数组就行：

[routerLink]="[card.id, card.status]"

这样生成的URL会是http://localhost:4200/dashboard/my-cards/DmJHJJA1e77fEEImKBju/[card.status的值]

3. 添加多个额外部分

如果需要多级路径，比如/dashboard/my-cards/[id]/edit/settings，只需要在数组里依次添加：

[routerLink]="[card.id, 'edit', 'settings']"

4. 使用绝对路径（可选）

如果不想基于当前路由拼接，而是从根路由开始构建完整路径，可以把根路径作为数组的第一个元素：

[routerLink]="['/dashboard/my-cards', card.id, 'details']"

这样不管当前处于哪个路由，都会生成从根开始的完整URL。

为什么用数组？ #

Angular的routerLink数组形式会自动处理路径的拼接规则，避免手动写斜杠导致的错误（比如多写/少写斜杠），同时让动态路径的维护更清晰。

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