Ng-template to bootstrap popover inside svg

Question

我正在使用带有Ngx-Bootstrap的Angular 5开发一个Web应用程序，我在SVG标签内的模板中遇到了麻烦。

我正在 svg 组(g 标签)中做一个循环。在 G 内部，我有一些异物，当鼠标在上面时，我想为每个异物使用引导弹出框，但我需要在弹出框内进行绑定，模板需要来自循环的数据。

<g *ngFor='let textBox of textBoxes'>
<foreignObject [id]='textBox.name' [attr.x]='textBox.topLeftNode.x' [attr.y]='textBox.topLeftNode.y'
[attr.width]='getWidth(textBox)' [attr.height]='getHeight(textBox)' [popover]='commentsTemplate' 
popoverTitle='Comments' triggers='mouseenter' [outsideClick]='true' container='body' placement='right'>
</foreignObject>
<ng-template #commentsTemplate>
<span class='comment' *ngFor='let comment of getComments(textBox.id)'>
{{comment}}
</span>
<input type='text' class='form-control comment-input' placeholder='Add comment...'>
<button class='btn btn-secondary comment-submit'>Comment</button>
</ng-template>
</g>

当 angular-cli 构建应用程序(不显示错误)时，浏览器仅显示一个空白页面，控制台显示以下错误：

错误：

模板分析错误：意外的结束标记 "：svg：ng-template"。当标签已经关闭时，可能会发生这种情况 通过另一个标签。有关更多信息，请参阅 https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("dd comment...">Comment [错误 ->] ")：ng:///AppModule/ReadComponent.html@78:10

但是我已经将弹出容器设置为"身体"。

我已经尝试使用 ng-container 并将 ng-template 标签放在另一个异物中，但控制台说 ：svg：ng-template 不存在......

我不能将 ng-template 放在主 foreignObject 中，因为我正在绑定它的内容(我没有显示该绑定以避免误解)。

对不起，英语令人困惑。

有人可以帮助我吗？

Answer 1

已解决。我确实在循环的ng模板中放了一个ng容器。所以我的 ng-container 调用一个外部 ng 模板，传递上下文。

<svg>
<g *ngFor='let textBox of textBoxes'>
<foreignObject [id]='textBox.name' [attr.x]='textBox.topLeftNode.x' [attr.y]='textBox.topLeftNode.y'
[attr.width]='getWidth(textBox)' [attr.height]='getHeight(textBox)' [popover]='preCommentsTemplate' 
popoverTitle='Comments' triggers='mouseenter' [outsideClick]='true' container='body' placement='right'>
</foreignObject>
<ng-template #preCommentsTemplate>
<ng-container *ngTemplateOutlet='commentsTemplate; context: textRectangle'></ng-container>
</ng-template>
</g>
</svg>
<ng-template #commentsTemplate let-id='id'>
<span class='comment' *ngFor='let comment of getComments(id)'>
{{comment}}
</span>
<input type='text' class='form-control comment-input' placeholder='Add comment...'>
<button class='btn btn-secondary comment-submit'>Comment</button>
</ng-template>

Answer 2

我只是想警告你，由于角度 9<ng-template>在<svg>元素中使用时经常出现问题。另请参阅。

我最终用<g>元素替换了所有<ng-template>，这些元素还可以包含*ngIf和*ngFor等结构指令。