コンポーネントからモーダルを開く方法

Question

コンポーネントからモーダルを表示したい。私は本当にコンポーネント

を参照してくださいからこのモーダルを開くことができるようにしたい

<template id="accept" #content let-c="close" let-d="dismiss"> <div class="modal-body"> <p>Modal body</p> </div> </template>

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

@Component({ 
    selector: 'my-hello-home-modal', 
    templateUrl: './hellohome.modal.html' 
}) 

export class HelloHomeModalComponent { 
    closeResult: string; 

    constructor(private modal: NgbModal) {} 

    open(content) { 
     this.modal.open(content).result.then((result) => { 
      this.closeResult = `Closed with: ${result}`; 
     }, (reason) => { 
      console.log(reason); 
     }); 
    } 
} 

： は私がフォローのようなNG-ブートストラップ（本体だけ）で作成したモーダル・コンポーネントを持っています私のhomeComponent

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

@Component({ 
    selector: 'my-home', 
    templateUrl: './home.component.html' 
}) 

export class HomeComponent implements OnInit { 
    constructor() { 
    } 

    timer() { 
     /** want to open this modal from here . **/ 

    } 
} 

Answer 1

自分のために、私はPrimeng Dialogモジュールコンポーネントt。 https://www.primefaces.org/primeng/#/dialog

それは本当に使いやすいですし、本当に素敵に見えると私は間違いなくそれをお勧めします：あなたはここでそれを見ることができます。

Answer 2

あなたHelloHomeModalComponentにテンプレートとopen -methodで1つの変更のViewChildを追加する必要がまず第一に：

export class HelloHomeModalComponent { 
    // add reference of the template 
    @ViewChild('content') content: any; 

    closeResult: string; 

    constructor(private modal: NgbModal) {} 

    // remove the parameter "content" 
    open() { 
     // and use the reference from the component itself 
     this.modal.open(this.content).result.then((result) => { 
      this.closeResult = `Closed with: ${result}`; 
     }, (reason) => { 
      console.log(reason); 
     }); 
    } 
} 

さらに、あなたのhome.component.htmlに参照を追加する必要があります。

... 
<!-- add the #myModal --> 
<my-hello-home-modal #myModal></my-hello-home-modal> 
... 

今、私たちはあなたのHomeComponentにこの参照を追加する必要があります。

export class HomeComponent implements OnInit { 
    // add ViewChild 
    @ViewChild('myModal') modal: HelloHomeModalComponent; 
    constructor() { 
    } 

    timer() { 
     // open the modal 
     this.modal.open(); 
    } 
} 

私はそれがうまくいくといいでしょう:)