Angular 6 - 路由未发生 - 可能 - table 行

Question

我不知道为什么我的路由没有发生。

到目前为止

<table mat-table [dataSource]="searchResult_DS" class="mat-elevation-z8">
     <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
         <th mat-header-cell *matHeaderCellDef> {{column}} </th>
         <td mat-cell *matCellDef="let element" > {{element[column]}} </td>
     </ng-container>

     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
       [routerLink] = "['/show-this-user-page', row.custId]" 
       (click)=highlightSelectedRow(row) [ngClass]="{ 'bg-clr': row === selectedRow }">
     </tr>
</table>

现在，我有一个 table 数据列表。每当用户选择特定行时，它应该导航到下一页

public highlightSelectedRow(row): void
{
    this.picked = row.custId; 

    // i can able get values from here
    //do i need to add below line here.?
    //this.router.navigate(['/show-this-user-page']);
}

routing.ts

const routes: Routes = [

  {
    path: 'Here-where-am-doingStuffes',
    canActivate: [AuthenticationGuard],
    component: Here-where-am-doingStuffes
    // this page landing with my mat-table- then am doing routing on row 
  },
  {
    path: 'sample route 1',
    canActivate: [AuthenticationGuard],
    component: sample-route-1
  },
  {
    path: 'sample route 1',
    canActivate: [AuthenticationGuard],
    component: sample-route-2
  },
  {
    path: 'second-main-data',
    loadChildren: '/some-other-module/someother-data.module#SecondMainModule'
  }
];

错误

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'td'. ("header-cell *matHeaderCellDef> {{column}} ][routerLink] = "['/show-this-user', element.email]"> {{element[column]}} "): ng:///AdminModule/searchUser.html@35:51 Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'td'. ("header-cell *matHeaderCellDef> {{column}} ][routerLink] = "['/show-this-user', element.email]"> {{element[column]}} "): ng:///AdminModule/searchUser.html@35:51

有人能告诉我应该在哪里更改我的代码以及还需要添加什么吗？如果您分享工作演示，将会非常有帮助。

Answer 1

如果你愿意，你可以保留点击监听器，下面的函数应该设置路由参数和导航。然后将从 <tr>

中获取 [routerlink]

控制器

<tr mat-row *matRowDef="let row; columns: displayedColumns;"
  (click)=highlightSelectedRow(row) [ngClass]="{ 'bg-clr': row === selectedRow }">
</tr>

确保您要路由到的路径已设置为接受这样的参数。 /:id 将让它接受一个，将其更改为您的示例需要的任何内容。（我认为这可能是问题所在）。

{ path: 'home/:id', component: HomeViewComponent }

一定要注入Router并导入

import { Router } from '@angular/router';

export class exampleRouter {

    constructor( private router: Router) {}

    public highlightSelectedRow(row): void
    {
        this.picked = row.custId;
        this.router.navigate(['show-this-user-page, this.picked']);
    }
}

模板

我认为您的模块中缺少导入，应该像这样包含路由模块。

import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [ AppComponent],
  imports: [ 
    RouterModule, // important one, be sure to import
    BrowserModule,
    FormsModule,
    HttpModule 
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

然后在你的模板中你应该可以拥有。

<tr mat-row *matRowDef="let row; columns: displayedColumns;" 
   [routerLink]="['show-this-user-page', row.custId]" 
   (click)=highlightSelectedRow(row) [ngClass]="{ 'bg-clr': row === selectedRow }">
</tr>

Answer 2

我的方案的解决方案是通过正确使用 queryParams

parentFile.ts

 this._router.navigate(['/goto-this-useDetail'], {queryParams: {email : this.currentlychosen}});

targetFile.ts

this._route.queryParams.subscribe(p => {
      this._order = p.email;
        console.log(this._order);
    })

如何正确使用queryParams - refere here

Angular 6 - 路由未发生 - 可能 - table 行

Angular 6 - Routing not happend - Mat-table row

javascript

angular

typescript

angular2-routing