ウェイカスタム角度の4要素でNGX-ブートストラップ静的モーダルを注入するために、このドキュメントで

Question

：modals#directive-static

モーダル作品をコンポーネントtemplateUrlでそれを含めたときに我々はしかし、Webページから直接それを使用しようとすると、これは、表示するすべてのサイトをブロックします。

ng-templateでHTMLを囲むとき、モーダルは動作を停止し、

は角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：

app.component.html：

.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 { } 

最後に、親コンポーネントで

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