Angular 4中的路由更改时组件未正确呈现答案

【问题标题】：Component not rendered properly on route change in Angular 4Angular 4中的路由更改时组件未正确呈现
【发布时间】：2019-09-23 15:13:13
【问题描述】：

我有一个名为“出勤”的组件，它有一个报告按钮。当用户点击“报告”按钮时，我在 admission.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，甚至在获取数据后调用了更改检测。

现在，问题来了：组件视图在路由更改时无法正确呈现。但是，当我刷新页面时，它加载得很好。浏览器控制台几乎没有错误，所以我不知道出了什么问题。请参阅图片以供参考。

【问题讨论】：

【解决方案1】：

在出勤组件中创建 ElementRef 类型的 elRef 变量。

private elRef:ElementRef;

并移除考勤组件onDestroy()

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

【讨论】：

【解决方案2】：

请尝试使用@inputs 和@outputs 从一个组件到另一个组件进行通信

【讨论】：