angular - Angular 中的简单模态对话框

Question

我想展示一个简单的引导对话框。我的链接如下:

<td style="width:40px;"><a data-toggle="modal" data-target="#imagesModal" class="btn btn-sm btn-primary" href="#"><i class="fa fa-image"></i></a></td>

和模态:

<div class="modal fade" id="imagesModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Images</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

Angular 将链接解释为“http://localhost:4200”。如何将简单的 anchor 用于引导模式？

Answer 1

提供了一个Demo Link所以你可以检查一下

您可以简单地使用 Ngx-Bootstrap您可以在 Angular 实现中实现模态的库:

主页模块 (home.module.ts)

import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    ModalModule.forRoot(),
  ]
})
export class HomeModule {}

主页组件 (home.component.ts)

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

  @Component({
    selector: 'app-home',
    template: `
       <button class="btn btn-primary"
               (click)="openModal(template)">Open Modal</button>

      // Ng-Template Modal
      <ng-template #template>
          <div class="modal-header">

             // Modal Title 
             <h4 class="modal-title pull-left">Modal</h4>

             // Close Button 
             <button type="button" 
                     class="close pull-right" 
                     (click)="modalRef.hide()">
                 <span aria-hidden="true">&times;</span>
             </button>
          </div>

          <!-- Modal Body -->
          <div class="modal-body">
            This is a modal.
          </div>
     </ng-template>
    `
  })
  export class HomeComponent {
     modalRef: BsModalRef;

     constructor(private modalService: BsModalService) {}

     openModal(template: TemplateRef<any>) {
         this.modalRef = this.modalService.show(template);
     }

  }