Angular 13动态按钮渲染问题：标题重复与路由跳转失效

子组件实现 #

组件类代码 #

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-page-header',
  templateUrl: './page-header.component.html',
  styleUrls: ['./page-header.component.css']
})
export class PageHeaderComponent {
  @Input() headerConfig!: {
    title: string;
    buttons?: Array<{
      text: string;
      route: string[];
    }>;
  };

  trackByBtnText(index: number, btn: { text: string }): string {
    return btn.text;
  }
}

组件模板代码 #

<div class="page-header">
  <!-- 标题独立渲染，避免随按钮循环重复 -->
  <h1>{{ headerConfig.title }}</h1>
  
  <!-- 按钮容器：仅当存在按钮时渲染 -->
  <div class="header-buttons" *ngIf="headerConfig.buttons?.length">
    <button 
      *ngFor="let btn of headerConfig.buttons; trackBy: trackByBtnText"
      [routerLink]="btn.route"
      class="header-btn"
    >
      {{ btn.text }}
    </button>
  </div>
</div>

父组件使用示例 #

无按钮场景 #

<app-page-header [headerConfig]="{ title: '首页' }"></app-page-header>

单按钮场景 #

父组件类定义配置：

headerConfig = {
  title: '用户列表',
  buttons: [
    { text: '新增用户', route: ['/user/add'] }
  ]
};

模板引用：

<app-page-header [headerConfig]="headerConfig"></app-page-header>

多按钮场景 #

父组件类定义配置（支持动态路由参数）：

orderId = '123';
headerConfig = {
  title: '订单详情',
  buttons: [
    { text: '返回列表', route: ['/orders'] },
    { text: '编辑订单', route: ['/orders/edit', this.orderId] }
  ]
};

模板引用：

<app-page-header [headerConfig]="headerConfig"></app-page-header>

问题修复说明 #

1. 标题重复问题：核心是将标题从*ngFor循环中剥离，单独渲染。按钮部分仅遍历按钮数组，标题不受按钮数量影响，始终只渲染一次。
2. routerLink失效问题：
   • 确保路由参数以数组格式传入（如['/user/add']），而非纯字符串，这是Angular routerLink的标准用法，支持静态路由和带参数的动态路由。
   • 确认子组件所在模块已导入RouterModule（若根模块已导入，子模块可共享）。

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