Ng-template to bootstrap popover inside svg

Question

我正在使用 Angular 5 和 Ngx-Bootstrap 开发一个网络应用程序，我在 SVG 标签内的模板中遇到了问题。

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

<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构建应用程序（不显示错误）时，浏览器仅显示空白页面，控制台显示以下错误：

Error: Template parse errors: Unexpected closing tag ":svg:ng-template". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("dd comment...'> Comment [ERROR ->] "): ng:///AppModule/ReadComponent.html@78:10

但是我已经设置了 popover 容器 "body"。

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

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

抱歉，英语令人困惑。

有人可以帮助我吗？

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

Answer 2

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

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

Ng-template to bootstrap popover inside svg

Ng-template to bootstrap popover inside svg

svg

bootstrap-popover

ngx-bootstrap

angular