Angular2 ng-bootstrap模态组件 [英] Angular2 ng-bootstrap modal components

问题描述

我有一个模态组件，它是用

I have a modal component created with ng-bootstrap like follow (just a body):

<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方法.

I really want to be able to call this modal from an other component in my web site. I just want call from my homeComponent the open method.

查看我的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，它非常简单...

Someone can explain me how to do that ? I came from angular 1.x and it was so much simpler ...

推荐答案

这就是我使用Angular 5和ng-bootstrap的方法.创建模态组件，如下所示:

This is how I do it with Angular 5 and ng-bootstrap. Create your modal component as follows:

import { Component, OnInit } from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'sm-create-asset-modal',
  templateUrl: './create-asset-modal.component.html',
  styleUrls: ['./create-asset-modal.component.css']
})
export class CreateAssetModalComponent implements OnInit {

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }
}

，模板将类似于:

<div class="modal-header">
  <h4 class="modal-title">Create New </h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('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-success" (click)="activeModal.close('Close click')">Create</button>
</div>

在要打开模态的组件中，添加NgbModal类型的变量，并按如下所示调用open:

In the component where you want to open the modal from add a variable of type NgbModal and call open as follows:

export class MyComponent {
  constructor(private modal: NgbModal) {}

  onClick() {
    this.modal.open(CreateAssetModalComponent);
  }

}

在声明了CreateAssetModalComponent的NgModule中，将组件添加到entryComponents数组中，如下所示:

In the NgModule where the CreateAssetModalComponent is declared add the component in the entryComponents array as follows:

@NgModule({
  imports: [...],
  declarations: [CreateAssetModalComponent],
  entryComponents: [CreateAssetModalComponent]
})

假设您导入了NgbModule之类的其他模块，这应该可以工作.

Assuming you have other Modules like NgbModule imported this should work.

这篇关于Angular2 ng-bootstrap模态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！