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”。您如何将简单的锚点用于引导模式？

Answer 1

已提供Demo Link，您可以查看

您可以简单地使用Ngx-Bootstrap 库，您可以在角度实现中实现您的模态：

主页模块 (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);
     }

  }

Answer 2

我找到了解决方案，并从我的应用中添加了代码 sn-ps。

这是完整的应用程序：https://github.com/shivansh-max/PianshJewelryStore 主要的 Angular 项目在 PianshJewelryStore 内。其他文件夹是本项目的一些 A.P.I 项目，请随意查看！！！

我必须使用 mat 对话框进行注入。因此，对于 mat-dialog，您需要安装一些依赖项。它们在这里（您可以使用 npm install 安装它们）：

• @angular/材质
• @angular/platform-b​​rowser/动画

然后您必须通过将其注入构造函数来将其添加到组件中：

  constructor(
        private sanitizer: DomSanitizer,
        public matDialog: MatDialog,
        private passer: PasserForModalService) {}

打开模态函数：

  openModal() {

    const dialogConfig = new MatDialogConfig();
    // The user can't close the dialog by clicking outside its body
    dialogConfig.disableClose = true;
    dialogConfig.id = 'modal-component';
    dialogConfig.height = '350px';
    dialogConfig.width = '600px';

    this.passer.jewelry = this.jewelry;
    // console.log(this.passer.jewelry);
    

    // https://material.angular.io/components/dialog/overview
    const modalDialog = this.matDialog.open(
      VeiwElementModalComponent,
      dialogConfig
    );
    
  }

在我传递 VeiwElementModalComponent 的地方，你将传递你自己的组件。

这是模态组件的构造函数：

  constructor(
      public dialogRef: MatDialogRef<VeiwElementModalComponent>,
      @Optional() @Inject(MAT_DIALOG_DATA) public data: any,
      public passer: PasserForModalService
  ) {}

以下是关闭模式的方法：

  close() {
    this.dialogRef.close();
  }