Question

我在组件内部渲染时遇到问题。我想从另一个组件发出数据并发送到另一个组件，但数据已经发出，但是问题是当我使用Renderer2创建 element 时，有时可以正常工作，但是有时不是。在组件中渲染样式元素可能是一个问题吗？

toolbar.state.service.ts 我的数据发射服务方法

  private globalStyles = new BehaviorSubject （''）;
formDesign（data：any）{
   this.globalStyles.next（data）;
}

aside.component.ts 在这里，我从“响应式表单”控件中发出数据，并将其发送到另一个组件。

  //高度
    this.formGlobal.controls ['height']。valueChanges
      .pipe（debounceTime（500））
      .pipe（distinctUntilChanged（））
      .pipe（takeUntil（this.destroy $））
      .subscribe（height => {
        this.formGlobal.controls ['height']。setValue（height）;
        this.formGlobal.updateValueAndValidity（）;
        this.showDataCriteria = {
          宽度：this.formGlobal.controls ['width']。value +'px'，
          高度：高度+'px'
        };
        this.toolbarStatus.formDesign（this.showDataCriteria）;
      }）;

builder.component.ts 在这里，我从aside.component.ts获取数据并收到了它！

  / **
   *生成CSS
   * /
  generateCss（）{
    让basicStyles ='';
    让newStyle：HTMLElement;
    让样式：HTMLElement = this.document.getElementById（'custom-class'）;
    样式
      ？ （newStyle =样式）
      ：（newStyle = this.renderer.createElement（'style'））;

    this.renderer.setAttribute（newStyle，'id'，'custom-class'）;
    让completeStyleFields ='';
    this.customStyle.global
      ？ （basicStyles + =`＃$ {this.projectInfo.id} {$ {this.customStyle.global}}`）
      ：（basicStyles + =''）;
    console.log（basicStyles）;
    this.customStyle.sections.forEach（element => {
      completeStyleFields + =`＃$ {element.id} {$ {element.textProps}}`;
    }）;
    basicStyles + = completeStyleFields;
    const text =（this.document.textContent = basicStyles）;
    newStyle.innerText =文本;
    this.renderer.appendChild（this.dndComponent.nativeElement，newStyle）;
  }

主要问题是在样式元素创建之后，并且我正在DOM中看到该元素，样式无法接受！有时接受，有时不接受。我该怎么办？如何操纵重新加载页面以注入组件和样式元素？简短的 UPD ：毕竟，我看到的是＃4152ae54-8a9d-49d5-a33d-62dfbbd35890 {height：600px;宽度：812px； } 但是样式不被元素接受！

Answer 1

如果第一个数字字母（＃4152ae54-8a9d-49d5-a33d-62dfbbd35890），则CSS无法呈现。这是因为，即使HTML5非常希望ID以数字开头，但CSS却不是。 CSS根本不允许选择器以数字开头。规范的相关部分指出。

使用渲染器（Angular 7）在组件内部渲染<style>

1 个答案: