代码之家 › 专栏 › 技术社区 › chuckd

在ngOnInit中设置CSS Id属性在浏览器中不起作用

typescript angular css html javascript

0

chuckd · 技术社区 · 4 年前

我对设置房产高度有点意见。

在我的ngOnInit方法中,我有以下代码。当我逐步查看它时,我可以在控制台中看到属性值的更改,但在屏幕或调试器中没有任何更改。我也试着在AfterViewInit内部运行这个,但似乎没有任何效果。

仅供参考——如果我在页面上创建一个按钮并手动触发它,我可以进行更改,但它在ngOnInit中不起作用。

有人告诉我为什么或者我做错了什么吗?

ngOnInit(): void {
  if (something) {
    document.getElementById('map-full').style.setProperty('height', 'calc(100vh - 57px)');
  } else {
    document.getElementById('map-full').style.setProperty('height', 'calc(100vh - 105px)');
  }
}

<div id="map-full">

1 回复 | 直到 4 年前

1

wlf 4 年前

它的工作原理如下: https://stackblitz.com/edit/angular-ivy-hupjkb?file=src%2Fapp%2Fhello.component.ts

你可以改变主意 if 在第10行,观察“开始编辑…”“地图”显示时文本上下移动 div 改变高度。

但这并不是实现这一点的惯用方法:

你应该避免与他人互动 document 并以这种方式检索或操作DOM。
最好保持CSS样式,而不是内联样式

更典型的方法是使用CSS和类绑定:

模板:

<div id="map-full" [class.full-height]="fullHeight || null">Map</div>

CSS

div { 
  height: calc(100vh - 105px)
}
div.full-height { 
  height: calc(100vh - 57px)
}

组件类别:

fullHeight = false;

改变 fullHeight 将从中应用或删除该类 div ,将应用相关CSS。

闪电战: https://stackblitz.com/edit/angular-ivy-gw4x8d?file=src%2Fapp%2Fhello2.component.ts