Чтобы открыть мод начальной загрузки 4, вызвав метод в машинописи

Question

Я использую модал начальной загрузки 4 в моем угловом приложении (v6):

КОД:

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>

      </div>
    </div>
  </div>

</div>

Теперь я открою модальное окно, нажав кнопку open. Это работает нормально. Но вместо того, чтобы открывать его вручную, при нажатии кнопки open мне нужно позвонить method/function, например:

open() {
     if('Some condition'){
       // Don't open the modal
     } else {
        // Open the modal
     }

   }

В методе open(), если условие не выполнено, modal должен открыться, иначе не должен. Как я могу добиться этого, используя только typescript

Демонстрация Stackblitz

Answer 1

Вам нужно использовать директиву @ViewChild для достижения этой цели.Просто добавьте следующий код:

<!-- The Modal -->
  <div class="modal" id="myModal"  #content>
    <div class="modal-dialog">
      ...... further code

в ваш файл component.ts:

export class AppComponent implements OnInit {

     @ViewChild('content') content: any;
     public  ngOnInit() {
  }

   public open() {
     if(!true){
       // Dont open the modal
     } else {
        // Open the modal
        this.content.open();
     }

   }

Обновлен блиц стека: https://stackblitz.com/edit/angular-ckggpk

Answer 2

Используя ng bootstrap, вы можете это сделать. начальная демонстрация начальной загрузки https://stackblitz.com/edit/angular-j2e63j?file=app%2Fmodal-basic.ts

дополнительную информацию см. Здесь https://ng -bootstrap.github.io

Answer 3

Вы также можете показать это, используя * ngIf для модального диалога с некоторым логическим значением.

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  showModalBox: boolean = false;

     public  ngOnInit() {
  }

   public open() {
     if(0){
       // Dont open the modal
       this.showModalBox = false;
     } else {
        // Open the modal
        this.showModalBox = true;
     }

   }
}

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" (click)="open()" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div *ngIf="showModalBox" class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
      </div>
    </div>
  </div>
  
</div>

Stackblitz: https://stackblitz.com/edit/angular-2ngwu1