css - Angular 2 : Add elements to dom programmatically with viewencaptulation

Question

我正在处理上下文菜单，我需要在呈现之前获取菜单和每个子菜单的大小。我过去这样做的方法是将元素结构附加到 dom，计算 bbox，行高等。然后将其删除，因此用户永远不会看到它。

从这个操作中，我得到了检查菜单是否超出屏幕等所需的一切。然后可能会对其进行更改。

在 Angular 2 中，如果 ViewEncaptulation 设置为 None，我可以执行此操作。但是如果我使用它，我当前的build设置会出错，所以我坚持使用默认值。

有谁知道如何以编程方式制作元素并使其从 ViewEncaptulation 内部获取相同的类？

Answer 1

经过一番思考，我这样解决了。

private elementRef: ElementRef

getEncapsulationId(): string {
    if (!this.elementRef) {
        return '';
    }

    var attr = this.elementRef.nativeElement.attributes;
    for(let i = 0; i < attr.length; i++){            
        let s = attr[i].name;
        if(s.includes('_nghost')){
            return '_ngcontent' + s.substring(7);
        }
    }

    return '';
}

在创建元素时，我将封装 ID 添加为属性。

var element = document.createElement('div');
element.setAttribute(this.getEncapsulationId, '');
element.classList.add('some-class');

如果有人对此问题有更好的解决方案，请告诉我。