Ng-template 在 svg 中引导弹出窗口答案

【问题标题】：Ng-template to bootstrap popover inside svgNg-template 在 svg 中引导弹出窗口
【发布时间】：2018-08-13 19:44:29
【问题描述】：

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

我正在一个 svg 组（g 标签）中循环。在 G 内部，我有一些 foreignObjects，当鼠标在其上时，我想为每个 foreignObject 使用引导弹出框，但我需要在弹出框内进行绑定，并且模板需要来自循环的数据。

<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-模板”。标签已经关闭时可能会发生由另一个标签。有关更多信息，请参阅 https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("dd 评论...'> 评论 [错误->] "): ng:///AppModule/ReadComponent.html@78:10

但我已将弹出框容器设置为“body”。

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

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

抱歉，英语令人困惑。

有人可以帮我吗？

【问题讨论】：

标签： angular svg ngx-bootstrap bootstrap-popover

【解决方案1】：

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

<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>

【讨论】：

你是超级巨星！我使用的是 ng-bootstrap，但在将复杂的工具提示附加到 SVG 形状时遇到了非常相似的问题。

【解决方案2】：

我只是想警告你，因为 angular 9 <ng-template> 在 <svg> 元素中使用时经常会出现问题。见also。

我最终将所有<ng-template> 替换为<g> 元素，其中还可以包含*ngIf 和*ngFor 等结构指令。

【讨论】：