Question

在我的instagram.component.html文件中，将boxPosition ID分配给我的div。然后我在另一个名为sidenav.component.ts的组件中使用它。 sidenav组件首先运行，当我单击该组件中的一个图标时，然后执行instagram.component。

问题出在这里，首先在执行instagram组件之前，我使用boxPosition元素来更改其右边距，但是boxPosition为null，我看到错误。

这是我的instagram.component.html：

<div class="content-container d-rtl">

  <div class="main-rectangular d-rtl" id="boxPosition">

  </div>

</div>

这是我的instagram.component.ts：

export class InstagramComponent implements OnInit {

  @Output('boxPosition') public boxPosition: ElementRef;

  constructor(public appGlobal: AppGlobals) {
  }

  ngOnInit() {
  }
}

这是我的sidnavbar.component.html：

<a class="icon-calendar"
   (click)="subSideNav('content-production')"
   routerLinkActive="active" routerLink="./content/production"
   ></a>

这是我的sidnavbar.component.ts：

subSideNav(id) {
    const navProperty = document.getElementById('subTitleSideNav');
    const navWidth = window.getComputedStyle(navProperty, null).getPropertyValue('width');
    const boxProperty = document.getElementById('boxPosition');


    if (navWidth === '0px') {
      // Open sidenavbar
      document.getElementById('subTitleSideNav').style.width = '140px';
      this.titleID = id;
      console.log(boxProperty);
      document.getElementById('boxPosition').style.marginRight = '240px';

    }
}

box属性为null，因此document.getElementById('boxPosition').style.marginRight不起作用。

我该如何解决此问题？

动态为特定元素添加样式

0 个答案: