Question

当我们尝试直接从网页使用模态时，模态有效，但当它包含在组件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 ：

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

在自定义角度4组件

1 个答案: