0

我目前有一个任务表，我希望能够单击其中一个任务将我带到一个新页面，该页面向我显示该任务运行的所有时间的历史记录。我需要一种方法将刚刚单击的任务的名称和 ID 传递到我要显示的新组件中。我试图按照 Angular 上的路由教程进行操作，但我不断收到空白数据，就像实际上没有加载任何内容一样。这是表格，我有评论包围的新路线的链接

<ng-container>

  <table matSort (matSortChange)="sortData($event)">
    <tr>
      <th mat-sort-header="Task ID">Task ID</th>
      <th mat-sort-header="Name">Name</th>
      <th mat-sort-header="Description">Description</th>
      <th mat-sort-header="Command">Command</th>
      <th mat-header="Run">Run</th>
    </tr>

    <tr *ngFor="let analytic of sortedAnalytics">
      <td>
        <input type="checkbox" [(ngModel)]="analytic.selected">
        {{analytic.task_id}}
      </td>

      <!--THIS IS THE LINE WITH THE LINK-->
      <td> <a routerLink="/task-history" routerLinkActive="active">{{analytic.name}}</a></td>
      <!--THIS IS THE LINE WITH THE LINK-->


      <td>{{analytic.description}}</td>
      <td>{{analytic.command}}</td>
      <td class="run" style="color: dodgerblue; text-decoration: underline" (click)="log()">Run Task</td>

    </tr>
  </table>

<button (click)="deleteAnalytics()">Delete Selected</button>

</ng-container>

这是我的任务历史组件中的 ngOnInit

ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.name = params['name']
      this.id = params['task_id']
      console.log(this.name, this.id)

    })
  }

console.log 显示“未定义未定义”

让我知道我错过了什么，谢谢！

4

1 回答 1

0

HTML

添加一个方法来导航到task-history带有查询参数的组件

 <table >
      <tr>
        <th mat-sort-header="Task ID">Task ID</th>
        <th mat-sort-header="Name">Name</th>
        <th mat-sort-header="Description">Description</th>
        <th mat-sort-header="Command">Command</th>
        <th mat-header="Run">Run</th>
      </tr>
    
      <tr *ngFor="let analytic of sortedAnalytics">
        <td>
          <input type="checkbox" [(ngModel)]="analytic.selected">
          {{analytic.task_id}}
        </td>
    
        <!--THIS IS THE LINE WITH THE LINK-->
        <td> <a  routerLinkActive="active" (click)="loadComponent(analytic.name,analytic.task_id)">{{analytic.name}}</a></td>
        <!--THIS IS THE LINE WITH THE LINK-->
    
    
        <td>{{analytic.description}}</td>
        <td>{{analytic.command}}</td>
        <td class="run" style="color: dodgerblue; text-decoration: underline" (click)="log()">Run Task</td>
    
      </tr>
    </table>

TS

loadComponent(analytic_name: any, analytic_task_id: any): any {
    this.router.navigate(['/task-history'], {
      queryParams: {
        name: analytic_name,
        task_id: analytic_task_id,
      }
    });
  }

来自我的任务历史组件的 ngOnInit

ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      this.name = params.name
      this.id = params.task_id
      console.log(this.name, this.id)

    })
  }
于 2021-07-29T18:19:39.913 回答