Добавление стилей в динамически создаваемый компонент

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);

удачи