Angular2 ng-bootstrap模态组件

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

导读：我有一个 modal component创建与 ng-bootstrap像跟随(只是一个正文)： template #content let-c="close" let-d="dismiss" div class="modal-body" pModal body/p /div/template 它是角度2组件 import { Component } from '@angular/core';import { NgbModal

我有一个 modal component创建与 ng-bootstrap像跟随(只是一个正文)：

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

它是角度2组件

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调用open方法.

看我的homeComponent

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

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

export class HomeComponent implements OnInit {
    constructor() {
    }

    ngOnInit() {
        console.log('Hello Home');

        /** want call modal popin here from the init component method in order to test the modal. **/

    }
}

有人可以解释我该怎么做？我来自棱角1.x,它简单得多……

解决方法

我不确定我是否完全理解你想要做什么,但实质上它很简单 – 打开一个带有特定内容的模态窗口,你只需要在NgbModal服务上调用open方法.最简单的实现可能是单行(this.modalService.open(‘Hi tehre！’);)：

@Component({
  selector: 'my-home',templateUrl: 'src/modal-basic.html'
})
export class HomeComponent implements OnInit {
  constructor(private modalService: NgbModal) {}

  ngOnInit(content) {
    this.modalService.open('Hi tehre!');
  }
}

在plunker中看到它：http://plnkr.co/edit/5qq04Q4HFLOe9tsyeMMI?p=preview

它与AngularJS 1.x的angular-ui / bootstrap完全相同！原则完全一样,没有任何改变.

令您头疼的是如何指定模态的内容.在上面的例子中我使用了一个字符串但是在绝大多数情况下你想要使用带有绑定,指令等的HTML.但是Angular是不同的,因为你不想传递HTML字符串,如果你不想将编译器发送到生产(你真的不想这样做……).

所以你的下一个最佳选择是使用另一个组件作为内容,这是一个最小的例子：http://plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview

注意：由于Angular本身存在错误,您需要使用setTimeout包装open()方法调用.错误参考：https://github.com/angular/angular/issues/15634

（编辑：李大同）

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