Angular 6, как я могу вручную добавить атрибуты области стиля в строку стиля из переменной?

Question

Я хочу найти способ получить имена этих атрибутов в файле component.ts: _ngcontent и _nghost

И используйте его, чтобы добавить область для стилей из переменной.

component.ts

export class MyComponent implements OnInit, OnChanges {
    @Input() styles: string
    styleNode

    ngOnInit() {
        this._updateStyles()
    }

    ngOnChanges() {
        this._updateStyles()
    }

    private _updateStyles() {
        if (this.styles && this.styles.length) {
            if (!this.styleNode) {
                this._addCustomStyleNode()
            }
            // <---- I want to add ngcontent attributes to this.styles string here
            this._updateStyleNodeContent()
        }
    }

    private _addCustomStyleNode() {
        this.styleNode = document.createElement('style')
        this.styleNode.type = 'text/css'
        const head = document.querySelector('head')
        head.appendChild(this.styleNode)
    }

    private _updateStyleNodeContent() {
        while (this.styleNode.firstChild) {
            this.styleNode.removeChild(this.styleNode.firstChild)
        }
        this.styleNode.appendChild(document.createTextNode(this.styles))
    }

}

Кто-нибудь знает, как получить эти метаданные? Или, может быть, есть какой-то способ, как я могу заполнить мою переменную стилей с помощью атрибутов ngcontent из поля Angular?

Answer 1

_nghost-xxx и _ngcontent-xxx будут иметь одинаковый номер xxx для компонента. К самому компоненту будет применен атрибут _nghost, а содержимое вашего шаблона получит атрибут _ngcontent. Вы можете получить ссылку на элемент вашего компонента и найти атрибут _nghost для него. Вот один быстрый пример того, как это сделать:

constructor(private elementRef: ElementRef) {
  this.ngHost = Object.keys(this.elementRef.nativeElement.attributes)
    .map(k => this.elementRef.nativeElement.attributes[k].name)
    .find(k => k.includes('_nghost'));
  this.ngContent = this.ngHost.replace('nghost', 'ngcontent');
}