Angular 6 - 路由不发生 - Mat-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>

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

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'
  }
];

错误

错误：未捕获（承诺）：错误：模板解析错误：无法绑定到'routerLink'，因为它不是'td'的已知属性。 （“header-cell * matHeaderCellDef> {{column}}] [routerLink] =”['/ show-this-user'，element.email]“> {{element [column]}}”）：ng：// /AdminModule/searchUser.html@35:51错误：模板解析错误：无法绑定到'routerLink'，因为它不是'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 }

一定要注入路由器并导入它。

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