ElementRef的替代方案 - Angular

Question

在我的ng2应用程序中，我使用的是一个没有公开其HTML元素的外部库。

我用它作为：

<custom-component>
     <div custom-title> Title </div>
     <div custom-content> Content </div>
</custom-component>

现在，当它以HTML格式呈现时，它会被添加为：

<custom-component>
    <div class='customComponentWrapper'>
         <div class='content'>
               <div custom-title> Title </div>
               <div custom-content> Content </div>
         </div>
    </div>
</custom-component>

要动态更改位置，我创建了一个本地模板引用变量。

<custom-component>
     <div #customComponent custom-title> Title </div>
     <div custom-content> Content </div>
</custom-component>

将其宽度更改为：

@ViewChild('customComponent') customComponent: ElementRef;

const elem = this.customComponent.nativeElement.parentElement.parentElement.parentElement;
elem.style.marginRight = width + 'px';

  

现在，{/ 3}}文档ElementRef的A / c将被弃用。我无法找到任何其他方式来做到这一点。还有其他方法可以实现同样的目标吗？

我在SO上也有一些angular.io。但是没有达成解决方案。