Question

在编程时，可重用性非常重要，我们可以采取的任何措施来减少代码重复，这将有助于我们解决问题。

我必须使用Modal弹出窗口向Angular 2项目中的许多地方的用户显示信息。我正在使用ng-bootstrap并且所有这些Modals都具有相同的页眉和页脚，但在许多情况下都会更改。有时候身体只是想要替换一个占位符，有时候它会有一些复杂性来准备动态内容。这些由不同的组件触发或管理。

ng-bootstrap允许我们以两种方式将内容传递到模态。

作为模板。这里将整个Modal html包装在<ng-template></ng-template>
作为组件

使用第一种方法，我必须每个模态重复编写标题，正文和页脚。

使用第二种方法，我可以将HTML包装在组件中，但需要放置占位符以使其动态化。所以我可以按如下方式传递值

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }

但灵活性仍然有限。

我想要实现的是使用内容投影[Transclusion]

所以，在我的Common Modal中，身体如下所示。我将<ng-content></ng-content>作为Modal身体的一个插槽。

  @Component({
  selector: 'common-modal',
  template: `
  <!-- Modal -->
  <div class="modal fade" id="common-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ng-content></ng-content>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
  </div>
  `,

现在我希望我可以像以下那样使用它。

<common-modal title="First Modal">
  <span>Welcome Jasnan!</span>
</common-modal>

在其他地方

<common-modal title="Second Modal">   
     //......
      <tr *ngFor="let student of pagedStudents">
        <td>
          {{student.name}}
        </td>
        <td>
          {{student.grade}}
        </td>
      </tr>
     //......
</common-modal>

我该怎么做？有没有办法在ng-bootstrap中执行此操作？谢谢你帮我解决这个问题。

Answer 1

到目前为止，最好的解决方案是在共享模块（组件和服务被导出到的地方）中创建自定义的可重用modal component和modal service，以便可以在其中有下列内容的任何其他模块中使用它：共享模块已导入

shared.module.ts

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    ModalComponent,
  ],
  providers:[ 
    ModalService
   ],
  exports:[
    ModalComponent
  ]
})

modal.component.html

<div class="custom-modal">
  <div class="model-close-btn">
      <img class="close-image" src="assets/icon/png/close.png" alt="">
  </div>
  <ng-content></ng-content>
</div>

modal.component.ts

import { Component, OnInit, OnDestroy, ElementRef, Input } from '@angular/core';
import { ModalService } from '../services/modal.service';
import { element } from '@angular/core/src/render3';

@Component({
  selector: 'custom-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit, OnDestroy {
  @Input() id: string;
  private element: any;

  constructor(private modalService: ModalService, private el: ElementRef) {
      this.element = el.nativeElement;
  }

  ngOnInit(): void {
      let modal = this;

      // ensure id attribute exists
      if (!this.id) {
          console.error('modal must have an id');
          return;
      }

      // move element to bottom of page (just before </body>) so it can be displayed above everything else
      document.body.appendChild(this.element);

      // close modal on background click
      this.element.addEventListener('click', function (e: any) {
          if (e.target.className === 'modal__overlay modal__overlay--toggle') {
              modal.close();
          }
      });

      this.element.addEventListener('click', function (e: any) {
        if (e.target.className === 'model-close-btn' || e.target.className === 'close-image' ) {
            modal.close();
        }
    });

      // add self (this modal instance) to the modal service so it's accessible from controllers
      this.modalService.add(this);
  }

  // remove self from modal service when directive is destroyed
  ngOnDestroy(): void {
      this.modalService.remove(this.id);
      this.element.remove();
  }

  // open modal
  open(): void {
    //console.log(this.element);
      this.element.style.display = 'block';

  }

  // close modal
  close(): void {
      this.element.style.display = 'none';
  }
}

modal.component.scss

/* MODAL STYLES
-------------------------------*/
:host(custom-modal) {
  /* modals are hidden by default */
  display: none;

}

.custom-modal-open {
  /* body overflow is hidden to hide main scrollbar when modal window is open */
  display: block !important;
}

.model-close-btn {
  position: fixed;
  width: 18px;
  height: 18px;
  right: 50px;
  top: 50px;
  z-index: 9999;
  background-color: #fff;
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;

  img {
    width: 18px;
  }
}

modal.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ModalService {

  private modals: any[] = [];

  constructor() { }

  add(modal: any) {
    // add modal to array of active modals
    this.modals.push(modal);
  }

  remove(id: string) {
    // remove modal from array of active modals
    this.modals = this.modals.filter(x => x.id !== id);
  }

  open(id: string) {
    // open modal specified by id
    let modal: any = this.modals.filter(x => x.id === id)[0];
    modal.open();
  }

  close(id: string) {
    // close modal specified by id
    let modal: any = this.modals.filter(x => x.id === id)[0];
    modal.close();
  }

}

现在，如果要在另一个模块的示例组件中使用此组件，请执行以下操作：

步骤1：将共享模块导入到要使用custom-modal的示例模块中

sample.module.ts

@NgModule({
  declarations: [
    SampleComponent,
  ],
  imports: [
    SharedModule
  ],
})

第2步：

sample.component.ts

  import { ModalService } from 'src/shared/services/modal.service';


  constructor(private modalService: ModalService){}

  //  call this function to open modal by passing modal id
  openModal(id: string) {
    this.modalService.open(id);
  }

  // just call this function to close modal by passing modal id
  closeModal(id: string) {
      this.modalService.close(id); 
  }

sample.component.html

<!-- modal popup started -->
  <custom-modal id="custom-modal-one">

   // add your any custom modal template code here and logic in sample.component.ts

  </custom-modal>
<!-- modalp popup ends -->

如何在Angular 2中重用Modal？

我想要实现的是使用内容投影[Transclusion]

1 个答案: