Angular4 вызывает функцию в конструкторе

Question

Я пытаюсь вызвать модальную функцию в конструкторе в Angular 4, но функция выделяется, которая не вызывается должным образом, и при загрузке страницы в журнале не читается ошибка, и модальное окно не появляется какполагаю.Экран хорошо темнеет, но текст в модале не отображается.

constructor(public formBuilder: FormBuilder,
            public router: Router,
            public toastr: ToastrService,
            public http: HttpClient,
            public modalService: BsModalService,) {
  if (this.getWardData) {
    this.displayHint();
  }
}

displayHint(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
}

HTML

<ng-template #template>
  <div class="modal-body text-center">
    <p>Do you want to Continue where you left?</p>
    <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
    <button type="button" class="btn btn-primary" (click)="decline()" >No</button>
  </div>
</ng-template>

Answer 1

Я думаю, у вас проблемы с модальным шаблоном.Вы можете запустить ваш модальный режим, но вам нужно передать displayHint параметр шаблона метода (TemplateRef).По вашему мнению, у вас есть этот шаблон, но вы не имеете ссылки на этот шаблон в реализации компонента.Добавьте эту часть кода в ваш компонент (ссылка на ваш модальный шаблон - вам нужно это, чтобы показать модальный):

@ViewChild('template') private modalTemplate: TemplateRef<any>;

Удалите this.displayHint() из вашего конструктора (я объяснил ниже), добавьте ngAfterViewInit в ngOnInitреализации и там добавить displayHint вызов метода:

export class YourComponentName implements AfterViewInit {
    @ViewChild('template') private modalTemplate: TemplateRef<any>;

    getWardData = true; // for example purposes - always true

    constructor(public formBuilder: FormBuilder,
                public router: Router,
                public toastr: ToastrService,
                public http: HttpClient,
                public modalService: BsModalService
    ) {}

    ngAfterViewInit() {
        if (this.getWardData) {
            this.displayHint(this.modalTemplate);
        }
    }

    displayHint(template: TemplateRef<any>) {
      this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
    }
}

---

Существует огромная разница между конструктором и ngOnInit / ngAfterViewInit компонента.Угловой процесс начальной загрузки состоит из двух основных этапов:

• построение дерева компонентов
• обнаружение запущенных изменений

Ваш метод контроллера выполняется в «Построении дерева компонентов»"stage

(ссылка на модальный шаблон здесь не определена)

Ваш метод ngOnInit запущен на этапе" Обнаружение изменений при запуске ".

(здесь указана ссылка на модальный шаблон)

Механизм связи @Input обрабатывается как часть следующей фазы обнаружения изменений, поэтому привязки вводанедоступны в конструкторе.

Так что вы не можете запустить свой модал из конструктора

Подробнее о хуках жизненного цикла вы можете найтиздесь

Живой рабочий пример вы можете найти здесь

Answer 2

Попробуйте использовать следующий код

constructor(public formBuilder: FormBuilder,
    public router: Router,
    public toastr: ToastrService,
    public http: HttpClient,
    public modalService: BsModalService, ) {
    // if (this.getWardData) {
    //   this.displayHint();
    // }
  }

  ngOnInit() {
    if (this.getWardData) {
      this.displayHint();
    }
  }

  displayHint(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, { class: 'modal-sm' });
  }