使用渲染器在组件内部渲染 <style> (Angular 7)

Question

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

toolbar.state.service.ts My service method for emitting data

private globalStyles = new BehaviorSubject<string>('');
formDesign(data: any) {
   this.globalStyles.next(data);
}

aside.component.ts Here I emit data from Reactive Form control and send to another component.

// Height
    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 = {
          width: this.formGlobal.controls['width'].value + 'px',
          height: height + 'px'
        };
        this.toolbarStatus.formDesign(this.showDataCriteria);
      });

builder.component.ts Here I'm getting data from aside.component.ts and it received!

/**
   * Generate CSS
   */
  generateCss() {
    let basicStyles = ' ';
    let newStyle: HTMLElement;
    let style: HTMLElement = this.document.getElementById('custom-class');
    style
      ? (newStyle = style)
      : (newStyle = this.renderer.createElement('style'));

    this.renderer.setAttribute(newStyle, 'id', 'custom-class');
    let 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 = text;
    this.renderer.appendChild(this.dndComponent.nativeElement, newStyle);
  }

主要问题是在创建样式元素之后，我在 DOM 中看到该元素，样式不接受！有时接受，有时不接受。我应该怎么办？如何操纵重新加载页面可能注入组件和样式元素？短 UPD： 毕竟，我看到的是#4152ae54-8a9d-49d5-a33d-62dfbbd35890 {height:600px; width:812px; } 但是元素不接受样式！

Answer 1

如果第一个数字字母 (#4152ae54-8a9d-49d5-a33d-62dfbbd35890)，

CSS 将无法呈现。那是因为尽管 HTML5 很高兴 ID 以数字开头，但 CSS 却不是。 CSS 根本不允许选择器以数字开头。规范的相关部分指出。

使用渲染器在组件内部渲染 <style> (Angular 7)

Rendering <style> inside Component with Renderer (Angular 7)

dom

rxjs

angular2-template

angular2-services

angular5