Рендеринг <style>внутри Компонента с Рендерером (Угловой 7) - PullRequest
Новая
       35

Рендеринг <style>внутри Компонента с Рендерером (Угловой 7)

0 голосов
/ 08 декабря 2018

У меня проблема с рендерингом внутри компонента.Я хотел бы отправить данные из другого компонента и отправить в другой компонент, данные были отправлены, но проблема заключается в том, что я создаю элемент с помощью Renderer2, иногда он работает, но иногда нет,Возможно, это проблема с отображением элемента стиля в компоненте?

toolbar.state.service.ts Мой сервисный метод для передачи данных 

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

в сторону.component.ts Здесь я отправляю данные из элемента управления Reactive Form и отправляю в другой компонент. 

// 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 Здесь я получаю данные от aside.component.ts и они получены! 

/**
   * 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, стили не принимают!Иногда принимаю, а иногда нет.Что я должен делать?Как манипулировать перезагрузкой страницы, чтобы внедрить компонент и элемент стилей?Short UPD: В конце концов, я вижу # 4152ae54-8a9d-49d5-a33d-62dfbbd35890 {height: 600px;ширина: 812px;} Но стили не принимаются к элементам!

1 Ответ

0 голосов
/ 10 декабря 2018

CSS не может отображаться, если первая цифровая буква (# 4152ae54-8a9d-49d5-a33d-62dfbbd35890).Это потому, что хотя HTML5 вполне доволен, когда идентификатор начинается с цифры, CSS - нет.CSS просто не позволяет селекторам начинаться с цифры.Соответствующая часть спецификации гласит.

...