Angular 4 + Bootstrap 组件模态

Question

所以我正在考虑在应用程序中实现一个组件，它可以充当 Bootstrap modal 中的组件以及页面中的常规 child 组件。

在示例中（上面 link 页面底部标题为 'Components as content'），在您的模式中实现的组件需要将 NgbActiveModal 添加到该组件的构造函数中。当我尝试执行上述操作时，这会阻止我的组件作为常规 child 组件实现。

在不制作包装器组件的情况下解决类似问题的任何想法？

Answer 1

所以我设法从中找到了答案。

通过添加 @Optional 装饰器并将您的子组件修改为如下所示，您可以编写额外的代码以允许它在模态中作为常规组件运行。

本例中的@Optional 装饰器只会将其注入到组件被用作模态组件时被调用的地方。我想添加？参数修饰符本来可以做同样的事情，但显然不是。

...
constructor(@Optional() private activeModal: NgbActiveModal){
    ...
}
    ...
finish(){
    if(this.activeModal){
        this.activeModal.dismiss(data);
    }else{
        //regular component finish code
    }
}

非常感谢@Aravind 愿意花自己的时间来协助 :) 干杯伙计。

Angular 4 + Bootstrap 组件模态

Angular 4 + Bootstrap Component Modal

ng-bootstrap

angular