Angular2 ng-bootstrap 模态组件

Question

我有一个 modal component created with ng-bootstrap 喜欢关注（只是一个 body）：

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

它是 angular 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 方法。

查看我的主页组件

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

    }
}

谁能告诉我该怎么做？我来自 angular 1.x 并且简单多了...

Answer 1

将 HelloHomeModalComponent 添加到您的构造函数参数并从 HomeComponent 调用 open 函数，如下所示：

import { Component, OnInit } from '@angular/core';
import { HelloHomeModalComponent } from "hello-home-modal.component";

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

export class HomeComponent implements OnInit {
    constructor(private modal: HelloHomeModalComponent) {}

    ngOnInit() {
        this.modal.open();
    }
}

如果您使用 @ViewRef() 从模态组件获取适当的模板引用，则无需将 content 参数传递给组件的 open()。

Answer 2

我不确定我完全理解你想要做什么，但本质上它非常简单 - 打开具有特定内容的模态 window 您只需在 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

Answer 3

这就是我使用 Angular 5 和 ng-bootstrap 的方式。按如下方式创建模态组件：

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如下：

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

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

}

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

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

假设您导入了 NgbModule 等其他模块，这应该可以工作。

Angular2 ng-bootstrap 模态组件

Angular2 ng-bootstrap modal components

bootstrap-modal

ng-bootstrap

angular