Угловой 6 - Маршрутизация не произошла - Строка мат-таблицы - PullRequest
Новая
       301

Угловой 6 - Маршрутизация не произошла - Строка мат-таблицы

2 голосов
/ 22 апреля 2019

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

пока 

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

Ошибка

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: Ошибки синтаксического анализа шаблона: Невозможно связать с 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

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

Ответы [ 2 ]

3 голосов
/ 22 апреля 2019

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

контроллера 

<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>
0 голосов
/ 23 апреля 2019

Решение для моего сценария достигается с помощью 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 - см. Здесь

...