跨度文本不会出现在带有 innerHtml 的元素中

Question

我想要两个元素：<p> 内部 html 和同一个 <p> 元素 <span> 标签中的普通文本。

 <p innerHtml="{{ someText | slice: 0:150 }}">
  <span>...Read more</span></p>

问题是，带有 innerHtmml 标签“...阅读更多”的跨度文本没有出现在屏幕上。我该如何解决这个问题？注意：我需要这两个：innerHtml+span 文本在一行中。

Answer 1

在你的组件中，你可以有这样的东西

component.ts

someText = '<h2>A header </h2><p>Text to slice</p>';

export class MyComponent implements OnInit {
   constructor() {
     someText = someText.slice(0,150);
     someText += '<span class="span_class">...Read more </span>';
   }
}

跨度文本不会出现在带有 innerHtml 的元素中

Span text does not appear in element with innerHtml

html

innerhtml

angular