開いた角度別のコンポーネントからのパワードブートストラップモーダル

Question

私は角度4の初心者です。現在、私のアプリケーションでは、無人電源ブートストラップを使用する状況にあります。 （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がモーダルcompoenentあると

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> 

を次のように私はモーダル・コンポーネントが含まれているように見えますメインのmodule.tsファイル

親コンポーネントからボタンをクリックすると、openModal関数がトリガーされます。私は親コンポーネントからボタンをクリックすることでモーダルを開くことができるように、Modalコンポーネントのopen関数を呼び出す必要があります。

どのように進めることができますか？モーダルを開くためにopenModal関数内で何をすべきか。事前

Answer 1

で

おかげであなたは他のコンポーネント（あなたのコンポーネントの位置に依存する）からアクセスモーダルにメソッドを呼び出すことによってそれを行うことができます、詳細情報については

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

見ます角度のある文書でhere