如何在 angular 的同一页面内将一个 table 路由到另一个 table

Question

我觉得很简单，但对我来说似乎很难，请帮忙。我需要做的是在同一页面内从一个 table 路由到另一个 table。

到目前为止我做了什么：

<table class="table  bg-gray-400 mt-3">
      <thead>
          <tr>
              <th>ID</th>
              <th>A</th>
              <th>B</th>
              <th>C</th>
              <th>D</th>
          </tr>
      </thead>
      <tbody>
        <tr *ngFor="let import of imports; let i=index">
          <td>{{import.id}}</td>
          <td>{{import.a}}</td>
          <td>{{import.b}}</td>
          <td>{{import.c}}</td>
          <td>{{import.d}}</td>
        </tr>
      </tbody>
  </table>

当用户点击 id 时，它将路由到具有不同数据且在同一页面内的不同 table。

Answer 1

如果我正确理解你的问题，你可以通过简单地向你的 <td> 添加一个 link 或点击侦听器来实现，如下所示：

your.component.html:

选项 1：

...
<td><a (click)="navigateToOtherTable(import.id)">{{import.id}}</a></td>
...

选项 2：

...
<td (click)="navigateToOtherTable(import.id)">{{import.id}}</td>
...

并且在您的组件中，您需要添加以下功能：

your.component.ts

navigateToOtherTable(id: string) {
    // TODO navigate to your table with the id
}

如何在 angular 的同一页面内将一个 table 路由到另一个 table

how to route one table to another table within same page in angular

angular-ui-router

angular