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

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

1 个答案: