Угловой. URL меняется без редиректа (угловой материал)

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

<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>

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

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

страница должна измениться с http://локальный:4200/компании на 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.info(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.info('fetched companies')),
        catchError(this.handleError('getCompanies', []))
      );
  }

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

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