Переход к новому маршруту не загружает данные компонентов в 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

* 1008 объекта *

Но всякий раз, когда я нажимаю ссылку html на go на новую страницу, изменяется только параметр маршрута. Я также хотел бы загрузить данные на основе нового id

Что я делаю не так?

app-routing.module.ts

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

детали-записи-routing.module.ts

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

Answer 1

Мне удалось заставить его работать, проверьте компонент детализация героя

Answer 2

Когда я смотрю на код, мне становится ясно, почему используются asyn c и await. С angular я бы склонился к использованию наблюдаемых.

public id;
public issueDetails;

constructor(
    private route: ActivatedRoute,
    private recordDetailsService: RecordDetailsService,
) { }

ngOnInit() {
    this.id = route.snapshot.paramMap.get('id');
    this.getDetails(this.id);
}

getDetails(id) {
    this.recordDetailsService.getDetails(id).subscribe(issueDetails => {
        this.issueDetails = issueDetails;
    }, error => console.error(error));
}

Вам также необходимо изменить свой recordDetailsService, чтобы он был наблюдаемым