Переход к новому маршруту не загружает данные компонента в Angular

Я визуализирую компонент 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, чтобы перейти на новую страницу, изменяется только параметр маршрута. Я также хотел бы загрузить данные на основе нового 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
  }
];

angular routes components router routerlink
person shAkur    schedule 08.05.2020    source источник
comment
Можете ли вы показать код, где вы определяете маршрут?   -  person Alexander    schedule 08.05.2020
comment
@Александр, проверь мой обновленный вопрос   -  person shAkur    schedule 08.05.2020

Ответы (2)


arrow_upward
0
arrow_downward

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

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, чтобы он был наблюдаемым

person Nabel    schedule 08.05.2020
comment
Я вернулся к наблюдаемым, но он все еще не обновляет данные компонента. - person shAkur; 08.05.2020

arrow_upward
0
arrow_downward

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

person shAkur    schedule 08.05.2020