將<a>-tag行為添加到<tr>-tag(Angular)

有人知道如何制作帶有可點擊routerlink的html -row，并可以選擇在同一個選項卡或新選項卡（ctrl 單擊）中打開它。我遇到的問題是，您不能將“tr”標簽包裝在“a”標簽中。感謝您的任何建議。

<tbody *ngFor="let item of defaultInvoicesList?._embedded.items">
                        <tr [routerLink]="this.getDetailsPath(item.legacyInvoiceId)" role="link">
                            <td>{{item.locationName}}</td>
                            <td>{{item.customerName}}</td>
                            <td><a [routerLink]="[getOrderDetailsUri(item.orderNumber)]">{{item.orderNumber}}</a></td>
                            <td>{{item.invoiceNumber}}</td>
                            <td>{{item.invoicePeriodStart | date: 'dd.MM.yyyy' }} - {{item.invoicePeriodEnd | date: 'dd.MM.yyyy' }}</td>
                            <td>{{item.createdByLastName}}, {{item.createdByFirstName}}</td>
                        </tr>
</tbody>

uj5u.com熱心網友回復：

你可以做這樣的事情，雖然當你 ctrl 單擊時，它既導航又在新選項卡中打開，但你可以通過一些調整來消除它！

ts

import {
  Component,
  Input,
  ChangeDetectionStrategy,
  ViewEncapsulation,
  Output,
  EventEmitter,
} from '@angular/core';
import { Router } from '@angular/router';

import { Config } from './config';
import { DataTable } from './data';
import { PageRequest } from './pageRequest';

@Component({
  selector: 'my-table',
  templateUrl: 'table.component.html',
  styleUrls: ['table.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class MyTableComponent {
  constructor(private router: Router) {}
  @Input()
  public config: Config;

  @Input()
  public data: DataTable<any>;

  public size = 5;
  public pageNumber = 0;

  @Output()
  public newPage: EventEmitter<PageRequest> = new EventEmitter<PageRequest>();

  @Output()
  public selection: EventEmitter<number> = new EventEmitter<number>();

  public changePage(pageNum: number) {
    const num =
      pageNum < 0
        ? 0
        : pageNum >= this.data.lastPage
        ? this.data.lastPage - 1
        : pageNum;

    this.pageNumber = num;

    this.newPage.emit({
      page: num,
      size: Number(this.size),
    });
  }

  public onSelect(index: number) {
    this.selection.emit(index   this.pageNumber * this.size);
  }

  emulateHref(link, event) {
    event.preventDefault();
    console.log(event);
    this.router.navigate([link]).then((result) => {
      if (event.ctrlKey) {
        window.open(window.location.href, '_blank');
      }
    });
  }
}

html

<table class="my-table">
  <thead class="my-table headers">
    <tr>
      <th *ngFor="let column of config">{{ column.header }}</th>
    </tr>
  </thead>
  <tbody class="my-table body">
    <tr
      my-active
      *ngFor="let row of data.data; index as rowIndex"
      (click)="emulateHref('details/'   rowIndex, $event)"
    >
      <td
        *ngFor="let column of config; index as i"
        [ngClass]="{ last: i === config.length - 1 }"
      >
        {{ row[column.value] }}
      </td>
    </tr>
  </tbody>
</table>
<div class="pag-space">
  <button type="button" class="pag-button" (click)="changePage(0)"><<</button>
  <button
    type="button"
    class="pag-button"
    (click)="changePage(this.pageNumber - 1)"
  >
    <
  </button>
  <select
    class="size-page"
    [(ngModel)]="size"
    (change)="changePage(this.pageNumber)"
  >
    <option selected value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
  </select>
  <button
    type="button"
    class="pag-button"
    (click)="changePage(this.pageNumber   1)"
  >
    >
  </button>
  <button
    type="button"
    class="pag-button"
    (click)="changePage(this.data.lastPage)"
  >
    >>
  </button>
</div>

分叉的堆疊閃電戰

uj5u.com熱心網友回復：

    <tbody *ngFor="let item of defaultInvoicesList?._embedded.items">
        <a href="">
            <tr [routerLink]="this.getDetailsPath(item.legacyInvoiceId)" role="link">
                <td>{{item.locationName}}</td>
                <td>{{item.customerName}}</td>
                <td><a [routerLink]="[getOrderDetailsUri(item.orderNumber)]">{{item.orderNumber}}</a></td>
                <td>{{item.invoiceNumber}}</td>
                <td>{{item.invoicePeriodStart | date: 'dd.MM.yyyy' }} - {{item.invoicePeriodEnd | date: 'dd.MM.yyyy' }}
                </td>
                <td>{{item.createdByLastName}}, {{item.createdByFirstName}}</td>
            </tr>
        </a>
    </tbody>

uj5u.com熱心網友回復：

在@naren-murali 回答的幫助下，我找到了解決方案。只需將點擊事件添加到“tr”元素即可。它包含的內容：

TS：

emulateHref(link, event) {
        event.preventDefault();
        if (event.ctrlKey) {
            window.open(link, '_blank');
        } else {
            window.open(link, "_self")
        }
    }

HTML：

<tbody *ngFor="let item of defaultInvoicesList?._embedded.items">
                        <tr (click)="this.emulateHref(this.getDetailsPath(item.legacyInvoiceId), $event)">
                            <td>{{item.locationName}}</td>
                            <td>{{item.customerName}}</td>
                            <td><a [routerLink]="[getOrderDetailsUri(item.orderNumber)]">{{item.orderNumber}}</a></td>
                            <td>{{item.invoiceNumber}}</td>
                            <td>{{item.invoicePeriodStart | date: 'dd.MM.yyyy' }} - {{item.invoicePeriodEnd | date: 'dd.MM.yyyy' }}</td>
                            <td>{{item.createdByLastName}}, {{item.createdByFirstName}}</td>
                        </tr>
                        </tbody>

標籤：javascript html 有角度的

上一篇：為什么遇到腳本標簽時html決議器停止

下一篇：為什么LocalStorage對陣列的作業很奇怪？[復制]