Angular。 Url 没有重定向的更改 (angular material)

Question

我正在为 Web api 项目实现用户界面。我有一个 table，它在 angular material:

的帮助下显示来自 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>

当我在 table 上点击公司时出现问题。在这些行的帮助下

<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 to 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 的帮助下重定向到另一个页面？

Answer 1

解决方案是将 app.component.html 从

更改为

<app-companies></app-companies>

到

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

Answer 2

而不是使用 [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);
}

Angular。 Url 没有重定向的更改 (angular material)

Angular. Url changes without redirect (angular material)

angular

angular-ui-router

angular-material

angular7