Способ внедрить ngx-bootstrap Static Modal в пользовательский компонент angular 4

В этой документации: modals#directive-static

Модальное окно работает, когда мы пытаемся использовать его непосредственно с веб-страницы, но при включении его в компонент templateUrl это блокирует отображение всего сайта.

При заключении HTML в ng-template модальное перестает работать,

Есть ли правильный способ использовать эту статическую модальность в компоненте angular 4?

Содержимое файла ts пусто, нет никакого метода или способа скрыть html, пока не будет нажата кнопка.

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

@Component({
  selector: 'demo-modal-static',
  templateUrl: './static.html'
})
export class DemoModalStaticComponent {}

angular modal-dialog ngx-bootstrap
person HDJEMAI    schedule 10.12.2017    source источник
comment
Не могли бы вы проверить консоль браузера на наличие ошибок? Также поможет plunkr/stackblitz с воспроизведением. Стартовые шаблоны для ngx-bootstrap: Plunkr: plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview StackBlitz: stackblitz.com/edit/ngx-bootstrap? файл=приложение%2Fapp.module.ts   -  person IlyaSurmay    schedule 11.12.2017

Ответы (1)


arrow_upward
2
arrow_downward

Наконец, я смог заставить его работать, просто небольшая проблема, чтобы полностью центрировать его.

Демо:

https://stackblitz.com/edit/ngx-bootstrap-8v1nb5?file=app%2Fapp.component.html

static-modal.component.html:

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: true}"
         tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title pull-left">Static modal</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            This is static modal, backdrop click will not close it.
            Click <b>&times;</b> to close modal.
          </div>
        </div>
      </div>
    </div>

static-modal.component.ts:

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

@Component({
  selector: 'static-modal',
  templateUrl: './static-modal.component.html',
  styleUrls: [ './static-modal.component.css' ]
})
export class StaticModal  {
}

static-modal.component.css:

.modal.fade{
  display:flex;
  top:40%;
  justify-content: center;align-items: center;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { AlertModule } from 'ngx-bootstrap';

import { StaticModal } from './modal-component/static-modal.component';

import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports:      [ BrowserModule, FormsModule, AlertModule.forRoot(),
  ModalModule.forRoot() ],
  declarations: [StaticModal, AppComponent, ],

  bootstrap:    [
    AppComponent
  ]
})
export class AppModule { }

Наконец, в родительском компоненте:

app.component.html :

<alert type="success">
  <strong>Well done!</strong> You successfully read this important alert message.
</alert>
<static-modal></static-modal>
person HDJEMAI    schedule 15.12.2017