代码之家 › 专栏 › 技术社区 › Thiago Martins

Ng模板引导svg内的popover

bootstrap-popover ngx-bootstrap svg angular

Thiago Martins · 技术社区 · 6 年前

我正在使用Angular 5和Ngx Bootstrap开发一个web应用程序,但SVG标记中的模板有问题。

我正在svg组(g标记)中进行循环。在G中,我有一些foreignObjects,我想在鼠标位于foreignObject上时为每个foreignObject使用bootstrap popover,但我需要在popover中进行绑定,模板需要来自循环的数据。

<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

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

我已经尝试使用ng容器并将ng模板标记放在另一个foreignObject中,但控制台显示:svg:ng模板不存在。。。

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

对不起,英语很混乱。

有人能帮我吗?

2 回复 | 直到 6 年前

Thiago Martins 6 年前

解决了的。我确实在循环的ng模板中放置了一个ng容器。因此,我的ng容器调用外部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>

bvdb 3 年前

我只是想警告你,自从9 <ng-template> 在 <svg> 要素看见 also .

我最终替换了所有 <ng模板(>); 具有 <g> 元素,也可以包含结构指令,如 *ngIf 和 *ngFor .