Как я могу открыть модальный метод ngAfterViewInit с помощью ViewChild?

Question

Я кодирую свой модальный шаблон с помощью angular 6, и я следовал учебному пособию о всплывающем окне bootstrap, но когда я попытался открыть мой модал с помощью метода ngAfterViewInit, он не работает и никогда не открывается.

Я работаю над Angular 6 и пытаюсь открыть модал как ViewChild в файле ts, но я не знаю, почему он не работает, цель - запустить модал, позже была начата страница, чтобы дать советлюдям.Кто-нибудь может мне помочь, пожалуйста.

<ng-template #content let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="dateOfBirth">Date of birth</label>
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
    </div>
  </ng-template>

import { Component, OnInit, AfterViewInit,ViewChild} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-advertisement-modal',
  templateUrl: './advertisement-modal.component.html',
  styleUrls: ['./advertisement-modal.component.css']
})

export class AdvertisementModalComponent implements OnInit, AfterViewInit {

  closeResult: string;
  @ViewChild('content') myModal;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
  ngAfterViewInit(){
    this.myModal.querySelector('content');
    //this.open(null);
  }

  ngOnInit() {
  }

}

Надеюсь, позже откройте окно инициализации моей веб-страницы, а сейчас просто ничего не происходит.

Answer 1

Готово!.

Я только что сделал это изменение файла TS.

import { Component, OnInit, AfterViewInit,ViewChild,ElementRef} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import * as jQuery from 'jquery';

@Component({
  selector: 'app-advertisement-modal',
  templateUrl: './advertisement-modal.component.html',
  styleUrls: ['./advertisement-modal.component.css']
})

export class AdvertisementModalComponent implements OnInit, AfterViewInit {

  closeResult: string;
  @ViewChild('content') myModal: any;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
  ngAfterViewInit(){
    this.open(this.myModal);
  }

  ngOnInit() {
  }

}

Я надеюсь, что это может помочь другим.Bye.