Angular 5中为AJAX动态创建的组件添加routerLink

首先得明确：手动拼接HTML插入DOM是行不通的，因为Angular不会编译这些动态插入的原生HTML，routerLink作为Angular的指令自然不会生效。最简洁且符合Angular最佳实践的方法，是利用框架自带的数据绑定和指令来动态渲染元素，完全不需要手动编译或刷新组件。

步骤1：定义数据存储变量 #

在组件类里声明一个数组，用来存放API返回的产品数据：

// 组件.ts文件
import { Component } from '@angular/core';
import { YourApiService } from './path-to-your-api-service';

@Component({
  selector: 'app-product-search',
  templateUrl: './product-search.component.html'
})
export class ProductSearchComponent {
  // 存储API返回的产品列表，包含id字段
  products: { id: string; name?: string; /* 其他你需要的字段 */ }[] = [];

  constructor(private apiService: YourApiService) {}
}

步骤2：请求API并更新数据 #

点击Search按钮时，调用API获取数据，直接把返回结果赋值给上面定义的数组：

onSearch() {
  this.apiService.fetchProducts().subscribe((response) => {
    // 假设API返回的是包含产品id的JSON数组
    this.products = response;
  });
}

步骤3：用*ngFor动态渲染带routerLink的元素 #

在模板里用*ngFor循环遍历产品数组，直接绑定routerLink到每个元素：

<!-- 组件.html文件 -->
<button (click)="onSearch()">Search</button>

<!-- 动态渲染的产品链接 -->
<div class="product-links">
  <a 
    *ngFor="let product of products"
    [routerLink]="['/detailsPage', product.id]"
    class="product-link"
  >
    查看产品详情（ID: {{ product.id }}）
  </a>
</div>

这样做的好处是：Angular会自动处理模板编译和数据同步，当products数组更新时，模板会自动渲染出对应的链接，routerLink也会完全正常工作——点击后直接跳转到对应的详情页，完全不需要额外的编译或刷新操作。

特殊场景：必须手动操作DOM？（不推荐） #

如果因为某些特殊需求，你确实需要手动创建DOM元素，可以通过Router服务手动绑定点击事件来实现跳转，代替routerLink指令：

import { Router } from '@angular/router';
import { Renderer2, ElementRef } from '@angular/core';

// 在组件类的constructor中注入依赖
constructor(
  private apiService: YourApiService,
  private router: Router,
  private renderer: Renderer2,
  private el: ElementRef
) {}

onSearch() {
  this.apiService.fetchProducts().subscribe((response) => {
    // 先清空之前的元素（可选）
    const container = this.el.nativeElement.querySelector('.product-links');
    while (container.firstChild) {
      container.removeChild(container.firstChild);
    }

    response.forEach((product) => {
      // 创建a标签
      const link = this.renderer.createElement('a');
      this.renderer.setProperty(link, 'textContent', `查看产品详情（ID: ${product.id}）`);
      this.renderer.addClass(link, 'product-link');
      // 绑定点击事件，用Router服务跳转
      this.renderer.listen(link, 'click', () => {
        this.router.navigate(['/detailsPage', product.id]);
      });
      // 添加到容器中
      this.renderer.appendChild(container, link);
    });
  });
}

但这种方式不仅代码更繁琐，还不符合Angular的数据流理念，维护起来也更麻烦，所以优先推荐第一种*ngFor的方式。

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