我在設定屬性高度時遇到了一點問題。
在我的 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">uj5u.com熱心網友回復：
它按原樣作業：https ://stackblitz.com/edit/angular-ivy-hupjkb?file=src/app/hello.component.ts
您可以更改第10 行，并在“地圖”更改高度if時觀察“開始編輯..”文本上下移動。div
但這不是以角度實作這一目標的慣用方式：
- 您應該避免以這種方式與 DOM 互動、
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。
Stackblitz：https ://stackblitz.com/edit/angular-ivy-gw4x8d?file=src/app/hello2.component.ts
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/427822.html
標籤：javascript html css 有角度的 打字稿
上一篇：如何在避免閃爍的同時翻譯元素？