Блог

Я реализую пользовательский интерфейс для проекта web api. У меня есть таблица, в которой отображаются компании из запроса API с помощью angular material:

 <div class="example-container mat-elevation-z8">
  <div class="example-loading-shade" *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>
  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="data$ | async" class="example-table" matSort matSortActive="company_rating"
      matSortDisableClear matSortDirection="asc">
      <ng-container matColumnDef="company_rating">
        <th mat-header-cell *matHeaderCellDef>rating</th>
        <td mat-cell *matCellDef="let row">{{row.rating}}</td>
      </ng-container>
      <ng-container matColumnDef="company_id">
          <th mat-header-cell *matHeaderCellDef>company_id</th>
          <td mat-cell *matCellDef="let row">{{row.id}}</td>
      </ng-container>

      <!-- other company data -->

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/company-detail/', row.id]" ></tr>
    </table>
  </div>
</div>
  

Проблема возникает, когда я нажимаю на company в таблице. С помощью этих строк

 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/company-detail/', row.id]" ></tr>
  

страница должна измениться сhttp://localhost:4200/companies на http://localhost:4200/company-detail /[id] но это не так (изменяется только URL, но содержимое — нет):

Таким образом, отображается список компаний, но не сведения о выбранной компании. И даже если я перезагружаю страницу, я получаю ту же страницу.
Дополнительный код:
Приложение-маршрутизация:

 import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CompaniesComponent } from './companies/companies.component';
import { CompanyDetailComponent } from './company-detail/company-detail.component';


const routes: Routes = [
  {
    path: 'companies',
    component: CompaniesComponent,
    data: { title: 'List of Companies' }
  },
  {
    path: 'company-detail/:id',
    component: CompanyDetailComponent,
    data: { title: 'Company Detail' }
  },
  {
    path: '',
    redirectTo: '/companies',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  

компонент сведений о компании:

 import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiService } from '../api.service';
import { Company } from '../company';

@Component({
  selector: 'app-company-detail',
  templateUrl: './company-detail.component.html',
  styleUrls: ['./company-detail.component.css']
})
export class CompanyDetailComponent implements OnInit {

  constructor(private route: ActivatedRoute, private api: ApiService, private router: Router) { }

  company: Company = {  Id: null,
    CompanyName: '', CompanyDescription: '', Rating: null, CompanyValuation: null, Salary: null, ProfessionalGrowth: null, 
    CompanyBenefits: null, CommunicationWithColleagues: null, EducationSector: null, NumberOfVotes: null}
  isLoadingResults = true;

  ngOnInit() {
    this.getCompany(this.route.snapshot.params['id']);
  }

  getCompany(id) {
    this.api.getCompany(id)
      .subscribe(data => {
        this.company = data;
        console.log(this.company);
        this.isLoadingResults = false;
      });
  }
}
  

компонент компаний:

 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ApiService } from '../api.service';
import { Company } from '../company';
import { Observable, of, throwError } from 'rxjs';
import { finalize } from 'rxjs/operators';


@Component({
  selector: 'app-companies',
  templateUrl: './companies.component.html',
  styleUrls: ['./companies.component.css']
})

export class CompaniesComponent implements OnInit {

  displayedColumns: string[] = ['company_rating', 'company_companyName', 'company_companyValuation', 'company_salary',
    'company_professionalGrowth', 'company_companyBenefits', 'company_communicationWithColleagues', 'company_educationSector','company_id'];

  //data: Company[] = [];
  data$: Observable<Company[]>;
  isLoadingResults = true;


  constructor(private api: ApiService) { }

  ngOnInit() {  
    this.data$ = this.api.getCompanies().pipe(
      finalize(() => {
        this.isLoadingResults = false;
      }))
  }
}
  

методы в api.service для получения данных из api:

 getCompanies (): Observable<Company[]> {
    return this.http.get<Company[]>(apiUrl  '/getCompanies',httpOptions)
      .pipe(
        tap(v => console.log('fetched companies')),
        catchError(this.handleError('getCompanies', []))
      );
  }

  getCompany(id: number): Observable<Company> {
    const url = `${apiUrl}/${id}`;
    return this.http.get<Company>(url).pipe(
      tap(_ => console.log(`fetched company id=${id}`)),
      catchError(this.handleError<Company>(`getCompany id=${id}`))
    );
  }
  

Итак, как я могу перенаправить на другую страницу с помощью angular material?

Решение заключается в изменении app.component.html из

 <app-companies></app-companies> 
  

Для

 <div class="container">
    <router-outlet></router-outlet>
</div>
  

вместо использования [routerLink]="['/company-detail/', row.id] напишите функцию щелчка, с помощью которой можно перейти на страницу сведений о компании. например:

 <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)='navigateTo(row.id)'></tr>

navigateTo(id) {
this._router.navigate('/company-detail/'  id);
}