时间戳

首页 > 解决方案 > 向动态创建的组件添加样式

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

问题描述

我正在开发内容驱动的 Angular 应用程序。

为了概述，

下面是示例 JSON，

            {
              text: 'This is paragraph', 
            }

下面的代码只适用于一个项目，如果我得到多个text项目，它就不起作用。

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

      stlye(type: string, text: string): string {
        switch (type) {
          case 'blold': return `<b>${text}</b>`;
        }
      }

标签： css

解决方案

您遇到的问题是时间问题。我无法找到确切的位置，但是在进行大胆更改时，您最终覆盖了原始修改的内容。如果您将控制台日志放在样式化组件的代码段中，您就会明白我在说什么

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

祝你好运

推荐阅读