在angular 9组件中，如何防止路由更改时组件重新启动

Question

我有一个组件，其中图表样式存储在一个变量中(不能使用width。这是为ngIf准备的)。但是，每当我更改路由时，这个类组件中的所有变量都会获得undefined值。

我尝试使用ngIf，服务(它们也是未定义的)，使用ngOnDestroy() (路由更改时不会调用它)

这是我的代码，有更多的解释。

组件类：

您可以看到变量setWidth，它跟踪d3图表的width，当路由更改时它就会变成undefined，我不确定是因为ngOnChange，因为HostListener会检测到窗口的大小调整，并相应地调整width的大小，即使它在路由更改后中断。

export class BrushBarChartComponent implements OnInit, OnChanges 
{
  @Input() timeSeriesData: Object;
  @ViewChild('timeSeriesChart', { static: true }) private timeSeriesChart: ElementRef;
  setWidth: number;
  
  constructor() { }
  ngOnInit() {}
  ngOnChanges() {
    this.render();
  }

  @HostListener('window:resize', ['$event'])
  onScreenResize () {
    this.render();
  }

  render() {
    let divWidth = this.timeSeriesChart.nativeElement.offsetWidth;
    if (divWidth === 0) {
      divWidth = this.setWidth;
    } else {
      this.setWidth = divWidth;
    }
    const margin = { top: 20, right: 50, bottom: 90, left: 40 },
    margin2 = { top: 130, right: 50, bottom: 30, left: 40 },
    width = divWidth - margin.left - margin.right;
  }
}

以下是模板：

<div id="timeSeriesChart" #timeSeriesChart *ngIf="DestroyHide"></div>

下面是路由文件如何处理更改路由请求。无法将整个代码发布到文件中。

{ 
  path: 'delete',  
  loadChildren: () => import('app/delete/delete.module').then(m => m.deleteModule), 
  canActivate: [AuthGuard], 
  data: {preload: true}
}

Answer 1

你需要记住ngOnChanges()是如何。在您的示例中，此方法将在您输入boad数据更改时运行。我指的是这个@Input() timeSeriesData: Object;

所以基本上，当timeSeriesData发生变化时，就会调用ngOnChanges()。它不是由路由更改触发的。

建议：

您可能希望在ngOnInit()上运行render()，因为这只在组件加载时执行一次。因此，基本上只有当您调整大小或更改输入值时，才会对变量进行更改。

您可能希望查看this和this以了解有关这些生命周期方法的更多信息。你会发现这些文章很有帮助。