如何从组件打开模态答案

【问题标题】：how to open modal from component如何从组件打开模态
【发布时间】：2020-04-14 21:44:56
【问题描述】：

我想显示来自组件的模态。我有一个使用 ng-bootstrap 创建的模态组件，例如跟随（只是一个主体）：

<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);
        });
    }
}

我真的希望能够从一个组件中打开这个模态

查看我的 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 . **/

    }
}

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

首先，您必须添加模板的ViewChild 并将open 方法中的一个更改添加到您的HelloHomeModalComponent：

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();
    }
}

我希望它有效:)

【讨论】：

【解决方案2】：

我自己使用 Primeng Dialog 模块组件。你可以在这里查看： https://www.primefaces.org/primeng/#/dialog

它非常易于使用，看起来非常漂亮，我绝对会推荐它。

【讨论】：

我可以从没有按钮的组件中打开模式吗？顺便说一句，我应该喜欢使用 ng-bootstrap
您希望根据布尔值切换可见性（即变量[true]=show，变量[false]=hide]），所以要在没有按钮的情况下执行此操作，您只需拥有一个调用时更改的函数显示/隐藏变量为真。
还要在另一个组件中打开它，您必须将它导入到您的主组件中才能访问模式。
我应该喜欢使用 ng-bootstrap 但它有帮助谢谢你顺便说一句

【解决方案3】：

您可以使用@angular/material 打开模态窗口：

https://www.ahmedbouchefra.com/angular/angular-9-8-material-modal-example-and-tutorial/

这很简单，而且您不必使用引导程序：)

【讨论】：