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

【问题标题】：Angular 6 - Routing not happend - Mat-table rowAngular 6 - 路由未发生 - 垫表行
【发布时间】：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 中
已经全部注入了。

标签： javascript angular typescript angular2-routing

【解决方案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

【讨论】：