Как использовать код для открытия модального в Angular 2?

обычно мы используем data-target="#myModal" на <button> открыть модальное. Сейчас мне нужно использовать коды для управления временем открытия модального.

если я использую [hidden] или *ngIf чтобы показать это, мне нужно удалить class="modal fade", иначе модал никогда не показывают. Вот так:

<div [hidden]="hideModal" id="myModal">

однако, в этом случае, после удаления class="modal fade" модального не выцветают и не имеет тени на заднем плане. И что еще хуже, он будет отображаться в нижней части экрана, а не в центре экрана.

Is есть способ сохранить class="modal fade" и используйте код, чтобы открыть его? 

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>
  </div>
</div>
17
angular bootstrap-modal

8 ответов

Это один из способов я нашел. Вы можете добавить скрытую кнопку:

<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#myModal">Open Modal</button>

затем используйте код, чтобы "нажать" кнопку, чтобы открыть модальный:

document.getElementById("openModalButton").click();

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

27

включить jQuery, как обычно, внутри тегов скрипта в индекс.формат html.

после всего импорта, но перед объявлением @Component, добавьте:

declare var $: any;

теперь вы можете использовать jQuery в любом месте вашего кода Angular 2 TypeScript:

$("#myModal").modal('show');

ссылка:https://stackoverflow.com/a/38246116/2473022

12

простой способ достичь этого в угловой 2 или 4 (предполагая, что вы используете bootstrap 4)

8

вот моя полная реализация модального компонента bootstrap angular2:

Я предполагаю, что в основной индекс.HTML-файл (с <html> и <body> теги) в самом низу <body> тег у вас есть:

  <script src="assets/js/jquery-2.1.1.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>

модала.деталь.ТС:

import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core';

declare var $: any;// this is very importnant (to work this line: this.modalEl.modal('show')) - don't do this (becouse this owerride jQuery which was changed by bootstrap, included in main html-body template): let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
  selector: 'modal',
  templateUrl: './modal.html',
})
export class Modal implements AfterViewInit {

    @Input() title:string;
    @Input() showClose:boolean = true;
    @Output() onClose: EventEmitter<any> = new EventEmitter();

    modalEl = null;
    id: string = uniqueId('modal_');

    constructor(private _rootNode: ElementRef) {}

    open() {
        this.modalEl.modal('show');
    }

    close() {
        this.modalEl.modal('hide');
    }

    closeInternal() { // close modal when click on times button in up-right corner
        this.onClose.next(null); // emit event
        this.close();
    }

    ngAfterViewInit() {
        this.modalEl = $(this._rootNode.nativeElement).find('div.modal');
    }

    has(selector) {
        return $(this._rootNode.nativeElement).find(selector).length;
    }
}

let modal_id: number = 0;
export function uniqueId(prefix: string): string {
    return prefix + ++modal_id;
}

модала.HTML-код:

<div class="modal inmodal fade" id="{{modal_id}}" tabindex="-1" role="dialog"  aria-hidden="true" #thisModal>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" [ngClass]="{'hide': !(has('mhead') || title) }">
                <button *ngIf="showClose" type="button" class="close" (click)="closeInternal()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <ng-content select="mhead"></ng-content>
                <h4 *ngIf='title' class="modal-title">{{ title }}</h4>
            </div>
            <div class="modal-body">
                <ng-content></ng-content>
            </div>

            <div class="modal-footer" [ngClass]="{'hide': !has('mfoot') }" >
                <ng-content select="mfoot"></ng-content>
            </div>
        </div>
    </div>
</div>

и пример использования в компоненте редактора клиента: клиент-редактировать-компонент.ТС:

import { Component } from '@angular/core';
import { ClientService } from './client.service';
import { Modal } from '../common';

@Component({
  selector: 'client-edit',
  directives: [ Modal ],
  templateUrl: './client-edit.html',
  providers: [ ClientService ]
})
export class ClientEdit {

    _modal = null;

    constructor(private _ClientService: ClientService) {}

    bindModal(modal) {this._modal=modal;}

    open(client) {
        this._modal.open();
        console.log({client});
    }

    close() {
        this._modal.close();
    }

}

клиент-вы можете редактировать.HTML-код:

<modal [title]='"Some standard title"' [showClose]='true' (onClose)="close()" #editModal>{{ bindModal(editModal) }}
    <mhead>Som non-standart title</mhead>
    Some contents
    <mfoot><button calss='btn' (click)="close()">Close</button></mfoot>
</modal>

конечно, название, параметры showclose, mhead и mfoot AR опционные.

6

лучший способ, который я нашел. Положи #lgModal или какое-либо другое имя переменной в вашем модальном.

на ваш взгляд:

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Large modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>

в компоненте

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
// todo: change to ng2-bootstrap
import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
import {ModalDirective} from 'ng2-bootstrap/ng2-bootstrap';


@Component({
  selector: 'modal-demo',
  directives: [MODAL_DIRECTIVES, CORE_DIRECTIVES],
  viewProviders:[BS_VIEW_PROVIDERS],
  templateUrl: '/app/components/modals/modalDemo.component.html'
})
export class ModalDemoComponent implements AfterViewInit{

  @ViewChild('childModal') public childModal: ModalDirective;
  @ViewChild('lgModal') public lgModal: ModalDirective;

  public showChildModal():void {
    this.childModal.show();
  }

  public hideChildModal():void {
    this.childModal.hide();
  }

  ngAfterViewInit() {
      this.lgModal.show();
  }

}
5

кажется, я нашел правильный способ сделать это с помощью фабриката необходмо предусмотреть-загрузочный. Первый импорт следующих классов:

import { ViewChild } from '@angular/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

внутри реализации класса вашего компонента добавьте свойство @ViewCild, функцию для открытия модального и не забудьте настроить modalService как частное свойство внутри конструктора класса компонентов:

@ViewChild('editSomething') editSomethingModal : TemplateRef<any>;
...

modalRef: BsModalRef;
openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template);
}
...
constructor(
private modalService: BsModalService) { }

часть "editSomething" объявления @ViewChild ссылается на файл шаблона компонента и его модальный шаблон реализация ( #editSomething):

...
<ng-template #editSomething>
  <div class="modal-header">
  <h4 class="modal-title pull-left">Edit ...</h4>
  <button type="button" class="close pull-right" aria-label="Close" 
   (click)="modalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>

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


  <div class="modal-footer">
    <button type="button" class="btn btn-default"
        (click)="modalRef.hide()"
        >Close</button>
  </div>
</ng-template>

и, наконец, вызовите метод, чтобы открыть модальный, где вы хотите, например:

console.log(this.editSomethingModal);
this.openModal( this.editSomethingModal );

этого.editSomethingModal это TemplateRef это может быть показано ModalService.

и вуаля! Модальный, определенный в файле шаблона компонента, отображается вызовом из реализации класса компонента. В моем случае я использовал это, чтобы показать модальное изнутри обработчик событий.

1

то, как я это делал без большого количества кодирования.. У меня есть скрытая кнопка с id="employeeRegistered"

на .ts файл I import ElementRef from '@angular/core'

затем после того, как я обработаю все на моем (click) метод сделайте следующее:

this.el.nativeElement.querySelector('#employeeRegistered').click();

затем модальные дисплеи, как ожидалось..

0

попробуйте использовать это ng-окно для angular2

https://github.com/BahgatMashaly/ng-window

-9