Question

如何使用ng-bootstrap modal作为我可以在应用程序的其他组件中调用的角度组件？

我已经创建了一个组件（myModalComponent.ts / myModalComponent.html / myModalComponent.css）并将ng-bootstrap模式放在其中

我的模态组件

HTML：

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

.TS

import { Component, OnInit, Input, Output, EventEmitter  } from '@angular/core';
import {NgbModal, ModalDismissReasons, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
import { enModalOptions } from '../../enums/modal-options.enum';
@Component({
  selector: 'mymodal-dialog',
  templateUrl: './mymodal.component.html',
  styleUrls: ['./mymodal.component.css']
})
export class MyModalDialog implements OnInit {
  @Input() Titulo: string;
  @Output() resultModalHandle = new EventEmitter<string>();
  result: string;
  constructor(private modalService: NgbModal) { }

  ngOnInit() {
  }
  open(content) {
    this.modalService.open(content).result.then((result) => {
      this.result = `Closed with: ${result}`;
    }, (reason) => {
      this.result = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }
  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
  resultModal() {
    this.resultModalHandle.emit(this.result);
  }
}

我的组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'component1.component',
  templateUrl: './component1.html',
  styleUrls: ['./component1.css']
})
export class component1 implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

如何在component1中调用MyModalComponent并获得de result？

Answer 1

我找到了一种方法：

import {Component, Input} from '@angular/core';

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

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: './modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

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

source

将entryComponents内的内容组件和NgbActiveModal添加到提供商。

ng-bootstrap作为Angular 5上的组件

1 个答案: