导航到新路径不会在Angular中加载组件数据

Question

我正在渲染一个Angular组件以便基于实体的id显示数据

<a *ngFor="let detail of details" [routerLink]="['/record-details', detail.id">
  Go to page {{detail.name}}
</a>

record-details.component.ts

public id;
public issueDetails;

constructor(
    private route: ActivatedRoute,
    private recordDetailsService: RecordDetailsService,
) {
    route.params.subscribe(params => this.id = params.id);

}

async ngOnInit() {
    await this.getDetails(this.id);
}

async getDetails(id) {
    try {
      this.issueDetails = await this.recordDetailsService.getDetails(id);
    } catch (e) {
      console.error(e);
    }
}

但是每当我单击html链接转到新页面时，它只会更改route参数。我也想基于新的id加载数据

我在做什么错？

app-routing.module.ts

{
    path: 'record-details',
    canActivate: [AuthGuard],
    loadChildren: () => import('./record-details/record-details.module').then(m => m.RecordDetailsModule)
},

record-details-routing.module.ts

const routes: Routes = [
  {
    path: ':id',
    component: RecordDetailsComponent
  }
];

Answer 1

看代码时突然想到的是为什么要使用异步并等待。有了角度，我就会倾向于使用可观察对象。

Answer 2

我设法使其正常运行，检查hero-detail component