angular – 如何从组件打开模态

发布时间：2020-12-17 17:03:22 所属栏目：安全来源：网络整理

导读：我想从组件中显示一个模态. 我有一个使用ng-bootstrap创建的模态组件,如follow(只是一个正文)： template id =“accept”#content let-c =“close”let-d =“dismiss” ???? div class =“modal-body” ???????? p模态体 / p ???? / DIV /模板 import { Comp

我想从组件中显示一个模态.
我有一个使用ng-bootstrap创建的模态组件,如follow(只是一个正文)：

< template id =“accept”#content let-c =“close”let-d =“dismiss”>
????< div class =“modal-body”>
????????< p>模态体< / p>
????< / DIV>
< /模板>

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 . **/

    }
}

解决方法

首先,您必须添加模板的ViewChild,并将open-method中的一个更改添加到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();
    }
}

我希望它有效:)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!