在自定义 angular 4 组件中注入 ngx-bootstrap 静态模式的方法

Question

当我们尝试直接从网页使用模态时，模态有效，但是当将它包含在组件 templateUrl 中时，这会阻止所有站点显示。

当 HTML 包含在 ng-template 中时，模态停止工作，

有什么正确的方法可以在 angular 4 组件中使用这个静态模态吗？

ts 文件的内容是空的，在单击按钮之前没有隐藏 html 的方法。

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

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

Answer 1

终于，我能够让它工作了，只是一个让它完全居中的小问题。

演示：

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

静态-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>

静态-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  {
}

静态-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>

在自定义 angular 4 组件中注入 ngx-bootstrap 静态模式的方法

Way to inject ngx-bootstrap Static Modal in a custom angular 4 component

modal-dialog

ngx-bootstrap

angular