Блог

Главная - Вопросы по программированию - Как предотвратить повторную загрузку компонента при изменении маршрута в компоненте angular 9

Как предотвратить повторную загрузку компонента при изменении маршрута в компоненте angular 9

#javascript #angular

#javascript #angular

Вопрос:

У меня есть компонент, в котором диаграмма width хранится в переменной (не могу использовать style. это для d3 ). Однако всякий раз, когда я меняю маршрут, все переменные в этом компоненте класса получают undefined значения.

Я пытался ngIf использовать службы (они тоже не определены) ngOnDestroy() (они не вызываются при изменении маршрутизации)

Вот мой код с дополнительными пояснениями.

класс компонента:

Вы можете видеть переменную, setWidth которая отслеживает width d3 диаграмму, и она изменяется 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}
}

Комментарии:

1. Трудно сказать, почему это происходит, потому что неясно, каковы отношения маршрутов, возможно, этот компонент должен выгрузиться и быть уничтожен.

2. Пожалуйста, скажите, ваша первоначальная проблема заключается только в том, что render вызывается до создания html, а timeSeriesChart не имеет ширины? Причина: я не уверен, зачем вам нужно создавать такую переменную.

3. Проблема в том, что он при загрузке компонента… setWith будет неопределенным. Значение будет получено только при timeSeriesData изменениях или изменении размера экрана. Ему нужно реализовать это таким образом, чтобы setWidth получал значение при инициализации компонента… что, по сути, является началом offsetWidth timeSeriesChart.nativeElement .

4. @MosiaThabo именно из-за этой настройки эта переменная не имеет смысла — offsetWidth в любом случае запрашивается при каждом вызове рендеринга, нет смысла сохранять ее и вызывать offsetWidth снова в следующий раз.

5. Возможно, вы захотите, потому что это может быть жизнеспособным, который он использует внутри шаблона. Или, возможно, где-то внутри этого класса. Я бы не стал беспокоиться о том, что он с этим делает, представьте, что ему приходится вызывать this.timeSeriesChart.nativeElement.offsetWidth везде, где он хочет использовать это значение?

Ответ №1:

Вам нужно помнить, как ngOnChanges() . В вашем случае этот метод будет выполняться при вводе изменений данных boad. Я имею в виду это @Input() timeSeriesData: Object;

Таким образом, в основном, ngOnChanges() вызывается при timeSeriesData изменении. это не вызывается изменением маршрута.

Предложение:

Возможно, вы захотите запустить свой render() на ngOnInit() , потому что это делается один раз при загрузке компонента. Таким образом, в основном изменения в ваших переменных будут происходить только при изменении размера или значения входных данных.

Возможно, вы захотите взглянуть на это и это для получения дополнительной информации об этих методах жизненного цикла. Вы найдете статьи полезными.