设置词缀＆＃39; Angular中的data-offset-top

Question

我使用Bootstrap和Angular 4来构建项目。我想使用bootstrap的affix插件。由于我的项目将是一个真正的网站，因此工作在不同的屏幕尺寸，菜单的位置将随设备而变化。为了设置词缀，它需要获得元素的精确顶部位置（或者＃34;偏移＆＃34;）（在我的例子中是一个导航栏），它需要插入一个名为data的属性中的这个位置-offset顶

<nav class="navbar navbar-inverse"
     data-spy="afix" 
     [attr.data-offset-top]="triggerValue" 
     role="navigation">

正常序列如下：div为菜单的品牌名称元素，ul-li组为菜单按钮等。 我试图在创建组件视图之后给data-offset-top一个值。我通过组件的类调用（我猜）正确的函数：

ngAfterViewInit() {
  let triggerValue: number;
    triggerAffixYValue = document.getElementById("main-menu")
                                 .getBoundingClientRect()
                                 .top;
console.log("Offset: " + triggerValue);

在控制台中，正如预期的那样，我从函数中获取输出，但效果不会触发。你能告诉我如何解决这个问题，或者我是否遗漏了什么。

提前谢谢。