0

Есть компонент модалки, через сервис для работы с модалками (экземпляр NgbModal) модальное окно открывается, но делает это криво (body не добавляется класс "modal-open").

Очень интересный факт, что при клике по странице (в любое место) модалка становится нормальной. Также, при закрытии модального окна должен происходить редирект в другое состояние, но этого не происходит, хотя замыкание срабатывает 100%. Буду благодарен за любую помощь!

Сам компонент модалки:

import {
 ChangeDetectionStrategy,
 Component,
 Input,
 OnInit
} from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: "example-selector",
  templateUrl: "./example.file.html",
  styleUrls: ["./example.file.sass"],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GlobalErrorComponent implements OnInit{
 @Input() error: any;
 constructor(public activeModal: NgbActiveModal) { }
 ngOnInit() {}
}

сервис, который осуществляет вызов модального окна:

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { CustomErrorComponent } from './custom.error.component';

@Injectable()

export class CustomErrorHandler implements ErrorHandler {
  private _modalRef: NgbModalRef | null = null;
  private get _router(): Router {
  return this._injector.get(Router);
}
private get _modalService(): NgbModal {
  return  this._injector.get(NgbModal);
}

constructor(private _injector: Injector) { }

handleError(error: any) {
  if (!this._modalRef) this._modalRef = this._modalService.open(CustomErrorComponent);
  this._modalRef.componentInstance.error = error;
  this._modalRef.result.then(res => {
    this._modalRef = null;
    console.log('it works');
    this._router.navigate(['state']);
  })
 }
}
2

1 ответ 1

0

если ты используешь changeDetection: ChangeDetectionStrategy.OnPush, то грубо говоря все твои эвенты направлены "из" компонента (можешь проверить вngDoCheck). Для решения вопроса тебе стоит убрать changeDetection или же добавить создание модалки в зону действия самого changeDetection. Для этого существует такой класс, как ChangeDetectorRef вот доки https://angular.io/api/core/ChangeDetectorRef

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.