时间戳

首页 > 解决方案 > 如何在完全呈现 html 之前更改元素的样式？

angular - 如何在完全呈现 html 之前更改元素的样式？

问题描述

在我的 instagram.component.html 文件中，我将boxPositionid 分配给我的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 属性为空，因此document.getElementById('boxPosition').style.marginRight不起作用。

我该如何解决这个问题？

标签： angular

解决方案

更新了 instagram.component.ts ：

export class InstagramComponent implements OnInit, 
 AfterViewInit{ 
  @Output('boxPosition') public   boxPosition: ElementRef;   
   constructor(public appGlobal:   AppGlobals) { } 
  ngOnInit() { } 
  ngAfterViewInit(){ 
      document.getElementById('boxPosition').
       style.marginRight = '240px';
  }
}

更新了 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);            
     } 
  }

推荐阅读