Компонент не отображается должным образом при изменении маршрута в Angular 4

Question

У меня есть компонент под названием «Посещаемость», и у него есть кнопка отчета.Когда пользователь нажимает на кнопку «Отчет», я вызываю следующий метод в serveance.component.ts:

gotoAttendanceReport(): void {
    this.router.navigate(['/attendance-report'], { queryParams: { subject_id: this.subject_id } });
}

Теперь в компоненте «Отчет о посещаемости» в ngOnInit есть следующее:

this.route.queryParams
    .subscribe(params => {
      this.subject_id = params.subject_id;
    });

Затем subject_id используется для извлечения отчета с использованием вызова API.Я использовал Promise и даже обнаружение изменения вызова после получения данных.

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

Answer 1

Создать переменную elRef типа ElementRef в компоненте Attendance.

private elRef:ElementRef;

и удалить компонент Attendance onDestroy()

ngOnDestroy(){
   this.elRef.nativeElement.remove();
}

Answer 2

пожалуйста, попробуйте установить связь между одним компонентом и другим компонентом, используя @inputs и @outputs

Подробнее https://angular.io/api/core/Component