Question

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

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

<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评论...”＆gt; 评论 [错误 - ＆gt;] “）：ng：///AppModule/ReadComponent.html@78:10

但是我将popover容器设置为“body”。

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

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

对不起令人困惑的英语。

有人可以帮助我吗？

Answer 1

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

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

Answer 2

解决。我确实在循环的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>

在svg里面的ng-template到bootstrap popover

2 个答案: