Question

下面是我将从远程服务器收到的RTF响应。

"rjf":[
   {
      "type":"paragraph",
      "depth":1,
      "text":"Do you have questions or comments and do you wish to contact ABC? Please visit our customer support page. \n",
      "inlineStyleRanges":[],
      "inlineEntityRanges":[
         {
            "type":"LINK",
            "offset":83,
            "length":16,
            "data":{
               "target":"_self",
               "url":"/index.htm"
            }
         }
      ]
   }
]

有了以上响应，我基于type创建了一个名为ParagraphComponent的动态组件，下面是代码

ParagraphComponent

@Component({
  selector: 'bw-paragraph',
  template: `<p #paragraph>{{ text }}</p>`
})
export class ParagraphComponent implements OnInit {
  @ViewChild('paragraph') paragraph: ElementRef;

  @Input()
  public text: string;

  constructor(
    private containerRef: ViewContainerRef,
    private getTags:GenerateInlineTagsService,
    private renderer: Renderer2) { }

  ngOnInit() {
  }

  contentOnCreate(values): void {
    if (values.depth === 1) {
      const content = this.getTags.getInlineTags(values);
      this.renderer.setProperty(this.paragraph.nativeElement, 'innerHTML', content);
    } else {
      this.text = values.text;
    }
  }
}

如您所见，在"rjf"对象中，我们有inlineEntityRanges，它告诉rjf.text应该在特定索引处使用{{ 1}}和link。为此，我创建了一个服务offsest

length

因此，使用上述代码，我可以成功地将GenerateInlineTagsService转换为角度视图。

这就是问题所在，

在export class GenerateInlineTagsService { constructor() { } getInlineTags(values) { let linkString = ''; const content = values.text.replace(/(?:\r\n|\r|\n)/g, '<br>'); if (values.inlineEntityRanges.length > 0) { const inlineData = values.inlineEntityRanges[0]; if(inlineData.type === LINK) { linkString = this.getLinkText(inlineData.offset, inlineData.length, values.text); inlineData['linkString'] = linkString; } return content.replace(linkString, this.generateInlineTags(inlineData)); } return content } getLinkText(offset, length, text: string) { return text.substr(offset, length); } generateInlineTags(elem: any): string { let result = ''; switch (elem.type) { case LINK: result = `<a href='${elem.data.url.trim()}' target=${elem.data.target.trim()}' >${elem.linkString}</a>`; break; } return result; } }中，我使用以下代码使用"rjf"方法将html字符串绑定到角度视图，

ParagraphComponent

但是我的设计被拒绝了，因为它使用的是innerHtml，而且它不是成角度的。

那不期望什么？

this.renderer.setProperty(this.paragraph.nativeElement, 'innerHTML', content);以上的内容应转换为角度视图，而不使用innerHTML
没有SafeHtml或domsanitizer
没有像Jquery这样的外部库

期望是什么？

如何基于远程响应即时创建模板
如何根据innerHTML和rjf将routerLink附加到p

我找不到其他方法，请在您的指导下克服该问题

将RTF响应转换为角度视图

0 个答案: