[英]Hey, so is there a way to nest ngTemplateOutlets? I am trying to create a simple customizable modal
I am trying to create a simple customizable modal.我正在尝试创建一个简单的可自定义模式。 Where I can pass via Input() decorator a TemplateRefs and then my component would render that.
我可以通过 Input() 装饰器传递一个 TemplateRefs,然后我的组件将呈现它。
I am passing 2 TemplateRefs.我正在传递 2 个 TemplateRef。 1 - The black backdrop, 2 - The dialog box.
1 - 黑色背景,2 - 对话框。 (I need the backdrop differently in other places in my app).
(我在我的应用程序的其他地方需要不同的背景)。
I am getting both inputs, and they work.** But they are created adjacent to each other, not nested.**我得到了两个输入,它们都有效。**但它们是彼此相邻创建的,而不是嵌套的。**
adjacent elements, not nested.相邻元素,不嵌套。
And without further adew, here it is...不用多说,这里是……
<ng-container [ngTemplateOutlet]="backdropTemplate">
<ng-container [ngTemplateOutlet]="dialogTemplate"></ng-container>
</ng-container>
I created a codepen to better demonstrate: https://codesandbox.io/embed/elastic-morning-fnxgeb?fontsize=14&hidenavigation=1&theme=dark我创建了一个代码笔来更好地演示: https ://codesandbox.io/embed/elastic-morning-fnxgeb?fontsize=14&hidenavigation=1&theme=dark
I have come to ngTemplateOutlet so that I can make my modal component generic.我来到 ngTemplateOutlet 是为了让我的模态组件通用。 However, if I can't nest the DialogBox template, inside the backdrop template then I would rather just pass both.
但是,如果我不能将 DialogBox 模板嵌套在背景模板中,那么我宁愿只传递两者。 But I would like to see what you think!
但我想看看你的想法!
I have been going at this for a few hours now, tried to surround with this.我已经研究了几个小时了,试图围绕这个。 ng-content instead..
ng-content 代替..
The biggest problem with this is that you need to somehow tell angular where to put the inner template.最大的问题是您需要以某种方式告诉 Angular 将内部模板放在哪里。 One solution I can think of is to use the context of the background-template to pass the inner template and let it handle the second template outlet by itself.
我能想到的一种解决方案是使用 background-template 的上下文传递内部模板,让它自己处理第二个模板出口。 Let me show you what I mean.
让我告诉你我的意思。
Inside of the modal.component.html we do something like this:在 modal.component.html 里面我们做这样的事情:
<ng-container
*ngTemplateOutlet="backdropTemplate; context: { dialogTemplate: dialogTemplate}"
></ng-container>
This tells the *ngTemplateOutlet
directive to give the backdropTemplate
the additional context specified.这告诉
*ngTemplateOutlet
指令为backdropTemplate
指定额外的上下文。 The backdropTemplate
can now use this context like this: backdropTemplate
现在可以像这样使用这个上下文:
<ng-template #modalBackdrop let-innerTemplate="dialogTemplate">
<div [ngClass]="{ 'modal-backdrop': true, 'backdrop-active': showModal }" (click)="toggleModal()">
<ng-container *ngTemplateOutlet="innerTemplate"></ng-container>
</div>
</ng-template>
So we essentially tell angular to bind the context variable dialogTemplate
to the local variable innerTemplate
and can use this to render it in another *ngTemplateOutlet
.所以我们基本上告诉 Angular 将上下文变量
dialogTemplate
绑定到局部变量innerTemplate
并且可以使用它在另一个*ngTemplateOutlet
中渲染它。 This is a technique often used in structural directives .这是结构指令中经常使用的技术。 The closest example I could find for this in the documentation is here .
我能在文档中找到的最接近的例子是这里。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.