Блог

Я не знаю, почему моя маршрутизация не произошла.

пока

 <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’. («заголовок-ячейка * matHeaderCellDef> {{столбец}} ][routerLink] = «[‘/show-this-user’, element.email]»> {{элемент [столбец]}} «): ng:///AdminModule/searchUser.html@35:51 Ошибка: ошибки синтаксического анализа шаблона: не удается выполнить привязку к ‘routerLink’, поскольку это неизвестное свойство ‘td’. («заголовок-ячейка * matHeaderCellDef> {{столбец}} ][routerLink] = «[‘/show-this-user’, element.email]»> {{элемент [столбец]}} «): ng:///AdminModule/searchUser.html@35:51

может кто-нибудь сказать мне, где я должен изменить свой код и что еще нужно добавить? было бы очень полезно, если бы вы поделились рабочей демонстрацией.

Если бы вы хотели, вы могли бы сохранить прослушиватель щелчков, а следующая функция должна задавать параметры маршрута и перемещаться. Затем взял бы [routerlink] из <tr>

контроллер

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

Убедитесь, что путь, по которому вы собираетесь маршрутизировать, настроен для принятия параметра, подобного so. он /: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>
  

Решение для моего сценария достигается за счет правильного использования параметров запроса

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);
    })
  

Как правильно использовать параметры запроса — см. здесь