Angular技术问询：点击生成可交互mat-tab替代新页面跳转

完全可以实现你要的效果——点击后在现有mat-tab-group中生成可切换的新标签页，而非打开新浏览器窗口。以下是具体实现步骤：

1. 改造组件TS文件 #

定义数组管理标签页状态，替换原有link()方法为添加新标签的逻辑：

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

@Component({
  selector: 'app-your-component', // 替换为你的组件实际选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 存储所有标签页数据：每个对象包含标签名和对应内容
  tabs: Array<{label: string, content: string}> = [
    { label: 'One', content: 'Small content' } // 初始默认标签
  ];

  // 点击添加新标签页的方法
  addNewTab() {
    // 生成唯一标签名（按序号递增，避免重复）
    const newTabLabel = `Tab ${this.tabs.length + 1}`;
    // 向数组添加新标签数据，内容可自定义
    this.tabs.push({
      label: newTabLabel,
      content: `Content for ${newTabLabel}`
    });
  }
}

2. 改造HTML模板 #

用*ngFor循环渲染动态标签页，替换原静态mat-tab：

<div class="container">
  <div class="form-container">
    <div class="align-link">
      <div>
        <p>Lien 1</p>
      </div>
      <div (click)="addNewTab()"> <!-- 绑定新的添加方法 -->
        <p>Lien 2</p>
      </div>
    </div>
    <mat-tab-group>
      <!-- 循环生成所有标签页，每个标签都可点击切换 -->
      <mat-tab *ngFor="let tab of tabs; let i = index" [label]="tab.label">
        <div class="example-small-box mat-elevation-z4">
          {{ tab.content }}
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>

额外说明 #

• 每次点击生成新标签：每次点击Lien 2都会触发addNewTab()，向tabs数组追加新对象，*ngFor会自动渲染出可点击的新mat-tab。
• 加载外部页面内容：如果需要在新标签中显示原链接对应的页面内容，可使用iframe，但需处理Angular安全策略（用DomSanitizer处理URL），示例逻辑可自行扩展。
• 防重复标签：若需避免生成重复标签，可在addNewTab()中添加标签名重复校验逻辑。

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