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

}

有人知道如何获取这些元数据吗？或者也许有一些方法可以用 Angular 框中的 ngcontent 属性填充我的样式变量？

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

Angular 6 如何手动将样式范围属性添加到变量中的样式字符串？

Angular 6 how can I manually add style scope attributes to style string from variable?

typescript

angular

angular5

angular6