Question

我正在研究内容驱动的Angular应用。

要概述一下，

API将共享富文本格式JSON。
根据响应中的type字段，将动态创建组件。

下面是示例JSON，

            {
              type: 'paragraph',
              depth: 1,
              text: 'This is paragraph',
              inlineStyleRanges: [{
                style: 'ITALIC',
                offset: 0,
                length: 6
              }]
            }

使用上述JSON，将动态创建paragraph组件。

在这里inlineStyleRanges告诉我需要在哪里应用样式。

下面的代码仅适用于一项，如果我得到多个paragraph项，则无效。

  getText(offset, length, text: string) {
        return text.substr(offset, length);
      }

      getStyles(type: string, text: string): string {
        switch (type) {
          case 'BOLD': return `<b>${text}</b>`;
          case 'ITALIC': return `<i>${text}</i>`;
        }
      }

ParagraphComponent.ts

  contentOnCreate(values: any): void {
    if (values.depth === 1 && (values.inlineEntityRanges.length > 0 || values.inlineStyleRanges.length > 0)) {
      this.renderEngineService.setRootViewContainerRef(this.embeddedView);
      const inlineComp = this.inlineService.getInlineView(values);
      inlineComp.forEach(obj => {
        const type = this.contentMappings[obj.type];
        this.renderEngineService.createComponent(obj, type);
      });
      if (values.inlineStyleRanges.length > 0) {
        values.inlineStyleRanges.forEach(styleItem => {
          const text = this.inlineService.getText(styleItem.offset, styleItem.length, values.text);
          const styledText = this.inlineService.getStyles(styleItem.style, text);
          this.styleList.push({styleText:text,type:styledText})
        });
        setTimeout(() => {
          this.styleList.forEach(styleItem => {
            this.renderer.setProperty(this.test.nativeElement, 'innerHTML', this.test.nativeElement.innerHTML.replace(styleItem.styleText, styleItem.type));
          });

        }, 1000);
      }
    } else {
      this.text = values.text;
    }
  }

我不确定这是怎么回事。

链接到工作原型：https://stackblitz.com/edit/angular-gofkkt?file=src%2Fapp%2Fcontent-components%2Fparagraph%2Fparagraph.component.ts

Answer 1

您遇到的问题是时间安排。我无法确定确切的位置，但是在进行了大胆的更改时，您最终覆盖了原始的修改内容。如果您将控制台日志放入样式化您的组件的代码段中，则会理解我的意思

setTimeout(() => {
  this.styleList.forEach(styleItem => {
    console.log(this.test.nativeElement.innerHTML)
    this.renderer.setProperty(this.test.nativeElement, 'innerHTML', this.test.nativeElement.innerHTML.replace(styleItem.styleText, styleItem.type));
  });

}, 1000);

我还没有弄清楚同步问题的确切位置，但是我设法产生了预期的结果，可以帮助您更好地理解问题。

setTimeout(() => {
  this.styleList.forEach(styleItem => {
    const elements = this.test.nativeElement.getElementsByTagName('bw-information-plain-text')
    for (var i=0; i<elements.length; i++) {
      this.renderer.setProperty(elements[i], 'innerHTML', 
      elements[i].innerHTML.replace(styleItem.styleText, styleItem.type));
    }
  });

}, 1000);

祝你好运

向动态创建的组件添加样式

1 个答案: