Реализация модального диалога начальной загрузки в angular7 - PullRequest
Новая
       3

Реализация модального диалога начальной загрузки в angular7

1 голос
/ 29 марта 2019

Я застрял на некоторое время при реализации простого модального диалогового окна начальной загрузки и нашел фрагменты ответа примерно на 10 разных страницах. Учитывая, что я не мог найти ответ быстро и четко, я решил поделиться своим решением, чтобы помочь другим. (первый ответ ниже)

Если вам нужно добавить несколько типов загрузочных виджетов, я предлагаю взглянуть на (https://ng -bootstrap.github.io / # / home )

1 Ответ

0 голосов
/ 29 марта 2019

В src / index.html я изменил содержимое тега body на: 

 <body>
    <app-root></app-root>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </script>
</body>

В компоненте, который вызывает модал, у меня есть в шаблоне:

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" (click)="showModal()">
  Open modal
</button>
<app-modal></app-modal>

И в компоненте машинописного текста 

    showModal(): void {   
        this.displayService.setShowModal(true); 
        // communication to show the modal, I use a behaviour subject from a service layer here
    }

Я создаю отдельный компонент для модального объекта, в шаблоне у меня есть 

<!-- The Modal -->
<div class="modal fade" 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" (click)="hideModal()">&times;</button>
      </div>

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

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="sendModal()" >Send</button>
        <button type="button" class="btn btn-danger" (click)="hideModal()">Close</button>

        <!-- this button is hidden, used to close from typescript -->
        <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
      </div>
    </div>
  </div>
</div>

И в машинописном текстекомпонент, который у меня есть 

    import { Component, OnInit } from '@angular/core';

    // This lets me use jquery
    declare var $: any;

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

      ngOnInit() {
      }
      showModal():void {
        $("#myModal").modal('show');
      }
      sendModal(): void {
        //do something here
        this.hideModal();
      }
      hideModal():void {
        document.getElementById('close-modal').click();
      }
    }

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

...