角2：viewencaptulationでdomに要素をプログラムで追加する

Question

私は、レンダリング前にメニューとすべてのサブメニューのサイズを取得する必要があるコンテキストメニューに取り組んでいます。私が過去に行ったやり方は、domに要素構造を追加し、bboxや行の高さなどを計算してからそれを削除することです。そのため、ユーザーにとっては決して見えません。

この操作から、メニューが画面の外に出ていないかどうかを確認する必要があります。変更してください。

ViewEncaptulationがNoneに設定されている場合、私はこれを行うことができます。しかし、私はそれを使用する場合、私は現在のビルドセットアップでエラーが発生するので、私はデフォルト値に固執しています。

要素をプログラムで作成して、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'); 

誰かがこの問題に対してより良い解決策を持っているかどうかを教えてください。