从另一个组件打开角度动力引导模态

我是Angular 4的新手 . 目前我在我的应用程序中使用agnular powered bootstrap . (https://ng-bootstrap.github.io/#/components/modal/examples

现在我想在另一个页面上点击按钮打开引导模式 . 父页面如下所示:

import { Component } from '@angular/core';
import { NgbdModalBasic }  from './modal-basic';

@Component({
  selector: 'home',
  templateUrl: './addYourCargo.component.html',
  styleUrls: ['./addYourCargo.component.css'],
})
export class addYourCargo {
    openModal(){

    }
}

NgbdModalBasic是模态组件,它看起来如下

import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html',
  exportAs: 'child'
})
export class NgbdModalBasic {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `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}`;
    }
  }
}

和模态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>

      <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

      <hr>

      <pre>{{closeResult}}</pre>

我已将Modal组件包含在主module.ts文件中 .

我从父组件中单击一个按钮,它会触发openModal函数 . 我必须调用Modal组件中的open函数,以便它可以通过从父组件单击按钮来打开模态 .

我该怎么办呢 . 在openModal函数中应该做什么来打开一个模态 .

提前致谢

回答(1)

2 years ago

您可以通过调用从其他组件访问的模态上的方法来实现(取决于组件的位置):

<button (click)="modal.openModal()">Open Modal</button>
<your-modal #modal></your-modal>

有关详细信息,请查看Angular doc here