방법은 사용자 정의 각 4 구성 요소에 NGX-부트 스트랩 정적 모달를 주입하기 위해이 문서에서

Question

: modals#directive-static

모달 작품을 구성 요소 templateUrl에 포함 할 때 우리는하지만, 웹 페이지에서 직접 사용하려고, 이렇게하면 표시 할 사이트가 모두 차단됩니다. 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>