Angular 4 + Bootstrap 组件模式

Question

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

在示例中（上面链接中页面底部标题为“组件作为内容”），在您的模式中实现的组件需要将 NgbActiveModal 添加到该组件的构造函数中。当我尝试执行上述操作时，这会阻止我的组件被实现为常规子组件。

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

Answer 1

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

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

在这种情况下，@Optional 装饰器只会在被用作模态组件时将其注入到组件被调用的地方。我想添加 ?参数修饰符会做同样的事情，但显然不是。

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

非常感谢@Aravind 愿意抽出自己的个人时间来提供帮助 :) 干杯。