在Angular中创建简单的模态对话框

Question

在Angular中创建简单的模态对话框

4

我想展示一个简单的Bootstrap对话框。我的链接如下：

<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"。如何在Bootstrap模态框中仅使用简单的锚点？

- Thomas Segato

你可能考虑使用https://ng-bootstrap.github.io/#/components/modal/examples。 - Luud van Keulen

你可以将 JavaScript:Void(0); 传递给 href。 - Exterminator

3个回答

3

我找到了解决方案，并从我的应用程序中添加了代码片段。

所以这就是完整的应用程序: https://github.com/shivansh-max/PianshJewelryStore 主要的Angular项目在PianshJewelryStore内。其他文件夹是一些API项目，可以随意查看！

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

@angular/material
@angular/platform-browser/animations

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

  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();
  }

- Shivansh Upadyay

0

你试试这个。

component.ts

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private modalService: NgbModal) { }

open(content: any) {
    this.modalService.open(content, { centered: true, size: 'xl' });
}

component.html

<button class="btn btn-primary" (click)="open(content)">Click Modal Popup</button>

    <ng-template #content let-c="close" let-d="dismiss">
        <div class="modal-header">
            <h4 class="modal-title" id="modal-basic-title">Modal Title</h4>
            <button type="button" class="btn-close" aria-label="Close" (click)="d('Cross click')"></button>
        </div>
        <div class="modal-body">
            Content Area
            </div>
    </ng-template>

参考：https://ng-bootstrap.github.io/#/components/modal/examples

- Prem Singh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KShewengger · Accepted Answer

我已经提供了演示链接，您可以查看它。

你可以简单地使用Ngx-Bootstrap库，在angular的实现中实现您的modal：

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

  }