在角度使用插值分配 HTML 中 span 元素的标题值。添加 换行符不起作用

Question

以下是用于上述问题的示例代码格式。

export interface IMarketVariables {
    MarketDescription: string;
}

在 marketcomponent.ts 文件中，我将值分配为：

marketDescription: IMarketVariables = { MarketDescription: '' }
this.marketDescription = 'Market1market2&#13market3market4'

在marketcomponent.html中：

<span title="{{this.marketDescription}}">MarketName</span> -- break is not working
<span title="Market1market2&#13market3market4">MarketName</span> -- Working fine with break

这里的中断标签 没有被应用插值

所以请你帮忙找出不使用插值的中断标签的原因。

Answer 1

这是角度解析器的工作原理：

• 解析器认为字符串不包含任何保留模式，所以 它不适用于插值

• 当您直接输入变量时，解析器会查找保留模式，当它看到 &#13 时，会将其应用于最终输出

[编辑]这就是你如何实现你想要实现的目标

您可以在字符串中使用换行符或使用带反引号的文字字符串，如下例所示

marketcomponent.html

<span title="{{this.marketDescription}}">MarketName</span>

marketcomponent.ts

this.marketDescription = `Market1market2
market3market4`;
// or 
this.marketDescription = "Market1market2\nmarket3market4";