Question

我正在使用包含主/详细视图的侧面板的function changeText() { text.textContent = 'OPEN'; btn.removeEventListener('click', animation); btn.addEventListener('click', function() { alert('hey!'); }); TweenLite.set(text, {x: -5}); };应用程序。我希望能够通过按下此详细信息组件中的按钮来最大化模式对话框中的细节组件 - 基本上可以从常规桌面应用程序中获得最大化功能的行为。

使用例如显示带有组件的模态没有问题。 ng bootstrap，但是我有许多不同的组件服务于细节组件的角色，为什么我需要做一些将组件注入模态的行。

基本上是针对模态的模板文件，如下所示：

Angular 5

很清楚模型上有很多材料可供选择，但无论如何都无法动态设置模态对话框的内容组件。

干杯！

Answer 1

我假设您正在使用ngBootstrap？如果是这样，您可以使用他们的“组件作为内容”功能。

http://plnkr.co/edit/BODdwmHFEOyHTcNF1PZf?p=preview

基本上，您必须将角度分量的引用作为变量，并将其传递给它们的方法。

注入他们的模态服务

constructor(private modalService: NgbModal) {}

打开时，传入对组件的引用。在该示例中，他们想要作为模态内容传递的动态组件称为 NgbdModalcontent 。

open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
}

希望这有帮助:)

将组件最大化为模态角度5

1 个答案: