Angular2 ng-bootstrap模态组件

我有一个 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