Question

我有一个名为“出勤”的组件，它有一个报告按钮。当用户单击“报告”按钮时，我在Attence.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

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

private elRef:ElementRef;

并删除“出勤”组件onDestroy()

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

Answer 2

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