Блог

Я довольно новичок в Angular и довольно долго занимаюсь этой проблемой.

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

У меня есть встроенный указатель даты ngx-bootstrap для выбора нескольких дат. Решение, которое я разработал, отлично работает в обычном потоке приложения, но если обновить браузер, datepicker перестает работать (больше не вызывает BSValueChange).

Вещи, которые я знаю:

• Когда страница перезагружается, наблюдаемая, где я присваиваю значения минимальной и максимальной датам, инициализируется до того, как данные «формы» загружаются в ее состоянии (поэтому, если проверить, является ли оно нулевым);

• Кроме того, я знаю, что Angular не уничтожает компонент при перезагрузке браузера. У меня возникла проблема, из-за которой не удалось переназначить подобный массив this.myArray = [] , и я нашел обходной путь, объединяющий все элементы для очистки массива, я думаю, что эта статья объясняет почему. Так что, возможно, initDate и EndDate не уничтожаются при перезагрузке и не вызывают какой-либо проблемы (?).

• Минимальные и максимальные даты правильно назначаются после загрузки «формы» (при обновлении), но указатель даты прерывается.

вот мой код:

   <bs-datepicker-inline 
    [bsValue]="dateSelected" 
    (bsValueChange)="onValueChange($event)"
    [dateCustomClasses]="dateCustomClasses" 
    [bsConfig]="config" 
    [minDate]="initDate" 
    [maxDate]="endDate">
    </bs-datepicker-inline>
  

 export class SorteioPersonalizadoSelectorComponent implements OnInit {

  initDate: Date;
  endDate: Date;
  notifier = new Subject();

  constructor(private localeService: BsLocaleService,
              private store: Store<{form: FormGroupState<RootForm>, sorteio: FormGroupState<Sorteio>}>) {
  }

  ngOnInit() {
    defineLocale('pt-br', ptBrLocale);

    this.config = Object.assign({}, {
      locale: 'pt-br',
      showWeekNumbers: false,
      useUtc: false
    });

    window.onbeforeunload = () => {
        this.notifier.next();
        this.notifier.complete();
    };

    this.store.pipe(select(state => state.form), takeUntil(this.notifier)).subscribe(form => {
      if (form != null amp;amp; form.value.id !== '') {

         //dataInicio and dataFim are stored in state as string values in the format 'yyyy/MM/dd'
         this.initDate = new Date(form.value.participationPeriod.dataInicio);
         this.endDate = new Date(form.value.participationPeriod.dataFim);

       }
    });
 
  }

}
  

Кто-нибудь знает, почему это происходит?