如何使用 angular7 超链接数据表中的表列值？

Question

在我的应用程序中，我正在获取数据表中的数据。应用程序前端运行在 Angular7 上。现在我希望某些列值应该有一个链接，单击该链接将显示一个新组件。 示例::

Column1           Column2     Column3
value with Link

我如何使用 angular7 实现这个场景？

我正在查看路由文档 https://angular.io/guide/router

但无法将其映射到我当前的要求。

Answer 1

如果我没猜错的话，你正在使用 Angular Material 数据表，不是吗？

如果是这样，请尝试以下操作：

 <ng-container matColumnDef="prop">
  <mat-header-cell *matHeaderCellDef> Prop Name </mat-header-cell>
  <mat-cell *matCellDef="let element">
    <a routerLink="/your-link">{{element.prop}}</a>
  </mat-cell>
</ng-container>

Answer 2

解决方案1：使用角度材质表

如果您专门使用 Angular Material 并发现在数据表列中添加超链接很棘手，那么以下解决方案会有所帮助

.ts 文件

import { ProductService } from './../data-service/data-service-product/product.service';
import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { IProduct } from '../models/IProduct';
import { MatPaginator }  from '@angular/material/paginator';
import { MatSort} from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';


@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit, AfterViewInit, OnDestroy {

  products: IProduct[];
  filteredProducts: any[];
  subscriptionVariable: Subscription;

  displayedColumns = ['title', 'price', 'action'];
  dataSource =  new MatTableDataSource();

  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: false}) sort: MatSort;

  constructor(private productDataService: ProductService) {
    this.subscriptionVariable = this.productDataService.getAll().subscribe(
      p => this.dataSource.data = this.filteredProducts = this.products = p as IProduct[] );
  }

  ngOnInit() {
  }


  // tslint:disable-next-line: use-lifecycle-interface
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  ngOnDestroy() {
    this.subscriptionVariable.unsubscribe();
  }   

}

.界面

export interface IProduct {
    category: string;
    imageUrl: string;
    price: number;
    title: string;
}

组件.html

<p>
  <a routerLink="/admin/products/new" class="btn btn-primary">
    New Product
  </a>
</p>
<p>

  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</p>

    <div class="example-container mat-elevation-z8">

  <mat-table #table [dataSource]="dataSource" matSort>

    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Title </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.title}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Price </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.price}} </mat-cell>
    </ng-container>

    <!-- Star Column -->
    <ng-container matColumnDef="action" >
      <mat-header-cell *matHeaderCellDef > Action </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <a [routerLink] ="['/admin/products/', element.key]" routerLinkActive="router-link-active" >Edit</a>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-paginator [length]="5" [pageSize]="5" [pageSizeOptions]="[5, 10, 25]">
  </mat-paginator>
</div>

---

解决方案2：使用html表格

---

使用普通的 html，您可以创建自己的表格，然后相应地添加功能

component.html 文件

    <table class="table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Price</th>
          <th>Action</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let product of filteredProducts">
          <td>
            {{ product.title}}
          </td>

          <td>
            {{ product.price}}
          </td>

          <td>
            <a [routerLink] ="['/admin/products/', product.key]" routerLinkActive="router-link-active" >Edit</a>
          </td>
        </tr>
      </tbody>
    </table>

**

最终结果

**

Answer 3

如果您在较大的文本中有嵌入链接，则上述内容对您不起作用。 这对我有用 - 你可以使用innerHTML属性绑定：

    <td mat-cell *matCellDef="let element" [innerHTML]="element.name">
    </td>

...并且文本将保留文本，假设存在包装锚 html 标签，则链接将成为链接，否则您可以在 .ts 代码中编写一个函数来自动包装链接，如下所示（假设单个链接为'http' 后跟一个空格或 EOF）：

  addHyperlink(txtLinkSansAnchor: string) {
    const srchVal = ' http';
    var retVal = txtLinkSansAnchor; // init to self

    if (txtLinkSansAnchor.includes(srchVal)) {
      var startPos = txtLinkSansAnchor.indexOf(srchVal) + 1;
      var endPos = txtLinkSansAnchor.indexOf(' ', startPos + 5);
      if (endPos < startPos) {
        endPos = txtLinkSansAnchor.length;
      }
      var replStringOrig = txtLinkSansAnchor.substring(startPos, endPos);
      var replStringNew = this.hyperlinkProtocol.split('----').join(replStringOrig);
      var txtLinkWithAnchor = txtLinkSansAnchor.replace(replStringOrig, replStringNew);
      retVal = txtLinkWithAnchor;
    }
    return retVal;
  }

...然后你的 html 模板代码将如下所示：

<td mat-cell *matCellDef="let element" [innerHTML]="addHyperlink(element.name)">
</td>