почему угловой дочерний маршрут не отображает компонент, кроме первого раза?

Question

У меня мало компонентов в моем угловом проекте.И дочерний маршрут для рендеринга этих компонентов в один специальный компонент.Когда я нажимаю для маршрутизации, он рендерит компонент в первый раз.Но после этого он только изменяет параметр url, но не отображает никакой компонент.

Вот мой код,

course.component.html

<div *ngIf="courses">
  <a *ngFor="let course of courses" class="btn btn-danger" color="warn" routerLink="{{ course.id }}">{{ course.title }}</a>
</div>

course.component.ts

segmentId: Object;
courses: Object;
meta_data: any;
showSpinner: boolean = true;

constructor(private route: ActivatedRoute, private data: DataService, private seo: SeoService) {

}

ngOnInit() {
    this.segmentId = this.route.snapshot.params['segment'];
    this.route.params.subscribe((params: Params) => {
        this.segmentId = params.segment
    });

    this.data.getCourses(this.segmentId).subscribe(data => {
        this.courses = data[0].courses;

        this.meta_data = data[0];

        this.showSpinner = false;

        //console.log( this.courses )
        //console.log( this.meta_data.segmentName )
    })
}

Answer 1

ngOnInit вызывается только один раз для каждого экземпляра компонента.Так что это нормальное поведение.

Если вы хотите изменения в режиме реального времени, вам нужно использовать наблюдаемые, как:

ngOnInit() {
  this.route.paramMap.pipe(
    switchMap(params => {
      this.segmentId = params.get('segment');
      return this.data.getCourses(this.segmentId);
    })
  ).subscribe(
    data => {
      this.courses = data[0].courses;
      this.meta_data = data[0];
      this.showSpinner = false;
    }
  )
}