Angular 6 - 路由未发生 - 垫表行

Posted 2023-03-06

【中文标题】Angular 6 - 路由未发生 - 垫表行

【英文标题】：Angular 6 - Routing not happend - Mat-table row

【发布时间】：2019-09-11 14:38:42

【问题描述】：

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

到目前为止

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

错误

ERROR 错误：未捕获（承诺）：错误：模板解析错误： 无法绑定到“routerLink”，因为它不是“td”的已知属性。 ("标题单元格 *matHeaderCellDef> column ][routerLink] = "['/show-this-user', element.email]"> element[column] "): ng:///AdminModule/searchUser.html@35:51 错误：模板 解析错误：无法绑定到“routerLink”，因为它不是已知的 'td' 的属性。 ("标题单元格 *matHeaderCellDef> column ][routerLink] = "['/show-this-user', element.email]"> element[column] "): ng:///AdminModule/searchUser.html@35:51

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

【问题讨论】：

通常该错误表明您没有在控件所在的模块中包含对 Angular RoutingModule 的引用。没有它，编译器不知道如何处理该指令。

我用一个例子在答案中添加了^^，希望这很酷

是的.. 正在我的本地进行更改。 ll，让你知道:)

好像 RoutingModule 没有注入到 appModule 中

已经全部注入了。

【参考方案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>

【讨论】：

感谢您的提醒！我可以保持我的 HTML 不变还是应该删除那个 routeLink？

如果它给你一个错误，把它取下来，你可以使用这个解决方案

我试过上面提到的，但失败了。导航不会发生。但它只是在我的控制台上显示点击的行数据。请分享工作演示

现在会看看，你能分享更多关于你的路线的信息以及它们是如何设置的吗？

最后你的解决方案和这个link 示例帮助我登陆特定用户页面

【参考方案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