Angular 2+: открытие модального Bootstrap через машинопись - PullRequest
Новая
       24

Angular 2+: открытие модального Bootstrap через машинопись

0 голосов
/ 11 февраля 2019

Как правило, при открытии модального режима функция вызывается через HTML: 

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

, который открывает модальное окно: 

  <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 class="input-group">
              <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
              </div>
            </div>
          </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>

Однако из-за обстоятельств (I 'Я использую Google Charts и HTML, где я могу использовать (click) = "open(content", мне не доступен), мне нужно иметь возможность открывать модальное окно с помощью javascript / typescript.

Я попытался сделать это так:

  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)}`;
    });
  }

  select(event: ChartSelectEvent) {

        this.open(content); //<--Attempt to Open Modal

        if ('deselect' === event.message) {    
        }
        else if ('select' === event.message) {

        }
      }

Моя попытка не открывает модал.Итак, я думаю, что мне нужно сделать, как вызвать template reference variable (#content) через машинописный текст, но я не уверен, как

1 Ответ

0 голосов
/ 11 февраля 2019

Вы можете получить ссылку на шаблон с помощью @ViewChild("content"): 

@ViewChild("content") private contentRef: TemplateRef<Object>;

и использовать эту переменную, чтобы открыть модальное значение: 

this.open(this.contentRef);

См. this stackblitz для демонстрации.

...