У меня есть простое приложение Angular, которое использует параметры маршрута в качестве наблюдаемой, поэтому содержимое моего компонента обновляется при изменении идентификатора маршрута. Я могу отслеживать идентификатор маршрута обновления в моем компоненте по мере необходимости, поэтому компонент обновляется по мере необходимости, но я не могу одновременно выполнить вызов REST для обновления содержимого, и именно отсюда в конечном итоге поступит большая часть моего содержимого.
Вот код в областях, имеющих отношение к проблеме:
menu.component. html использует индекс элемента в качестве идентификатора для передачи на content.component .ts
<div>
<h3>Lesson Links</h3>
<div class="row">
<div class="col-sm-4" *ngFor="let menu of menus | async; index as id">
<div class="card">
<div class="card-body">
<a [routerLink]="['/content',id]">{{menu.lessonName}}</a>
</div>
</div>
</div>
</div>
</div>
content.component.ts 'захватывает' идентификатор из routerLink в menu.component. html
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
id: string;
content;
url = 'api address'
constructor(private route: ActivatedRoute, private http: HttpClient) { }
ngOnInit(){
this.route.paramMap.subscribe(params => {
console.log(params.get('id')); //for logging id (Ill eventually pass the id to the api url)
this.id = params.get('id');
this.getContent(); //this isnt getting called each time, but the id from above is logging each time the menu item is clicked.
});
}
getContent(){
this.content = this.http.get(this.url);
}
}