如何在angular上使用javascript更改样式

Question

我正在使用angular构建一个离子应用程序。

我有一个包含HTML和SCSS文件的页面。我在这个页面上使用了一些ng引导程序组件(datePicker(。

我可以使用以下代码更改datePicker中类的样式。

::ng-deep .ngb-dp-months {
background: red;
}

到目前为止一切都很好

现在我想更改ngOnInit()上此类.ngb-dp-day的宽度

我试过这个代码，但它不起作用，试着在这里为我修复它：

请参阅：https://stackblitz.com/edit/angular-ciow7q-n7rums

//I need to fix this funtions
changeDayElementWidth() {
this.widthPerDay = (window.innerWidth) / 7;
this.daysElements = document.getElementsByClassName("ngb-dp-day") as HTMLCollectionOf<HTMLElement>;
console.log(this.daysElements);
for (var i in this.daysElements) {
this.daysElements[i].style.width = this.widthPerDay + 'px';
}
}

问题是：

如何更改元素::ng-deep .ngb-dp-day的CSS

请参阅：https://stackblitz.com/edit/angular-ciow7q-n7rums

请帮帮我。

Answer 1

我同意@guerric你永远不应该在Angular中调用JavaScript API。为了改变角度样式，您可以使用

[ngStyle]

<div [ngStyle]="{'width': widthChangingPropertyInTypeScript + 'px' }"></<div>

[ngClass]

<li [ngClass]="{
'text-success':person.country === 'UK',
'text-primary':person.country === 'USA',
'text-danger':person.country === 'HK'
}">{{ person.name }} ({{ person.country }})
</li>

[style.widh]这可能是component.ts文件中的一个函数，它将为您计算宽度并返回一个字符串。

<div [style.width]="getWidth(this)"></div>

Answer 2

您不应该在Angular中调用JavaScript API，而是在模板中尝试[style.width.px]="widthPerDay"。

编辑：

现在你澄清了，唯一的解决方案(但非常棘手(是这样做：

const style = document.createElement('style');
style.innerHTML = `.ngb-dp-months { width: ${widthPerDay}px; }`;
document.body.appendChild(style);

Answer 3

我已经通过使用day元素的自定义模板解决了这个问题

日期选择器基本.html

<p>Simple datepicker</p>
<div>
<ngb-datepicker 
#dp 
[(ngModel)]="model"
[dayTemplate]="customdaytemplate" 
(navigate)="date = $event.next"></ngb-datepicker>
</div>

<ng-template #customdaytemplate let-date let-focused="focused">
<span
[ngStyle]="{ width: widthPerDay+'px' }"
class="custom-day"
>
{{ date.day }}
</span>
</ng-template>

日期选择器基本.ts

import {Component, OnInit} from '@angular/core';
import {NgbDateStruct, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-datepicker-basic',
templateUrl: './datepicker-basic.html',
styleUrls: ['./datepicker-basic.scss'],
})
export class NgbdDatepickerBasic implements OnInit {
model: NgbDateStruct;
date: {year: number, month: number};
widthPerDay;
daysElements;
constructor(private calendar: NgbCalendar) {
}
ngOnInit() {
this.changeDayElementWidth();
}
changeDayElementWidth() {
this.widthPerDay = (window.innerWidth) / 7;
}
}

日期选择器基本.scs

/* custom-day */
.custom-day {
display: inline-block;
text-align: center;
height: auto;
width: 2em;
padding: 0.2rem 0;
}
:host ::ng-deep .ngb-dp-day,
:host ::ng-deep .ngb-dp-week-number,
:host ::ng-deep .ngb-dp-weekday {
width: auto;
height: auto;
text-align: center;
}

请参阅：https://stackblitz.com/edit/angular-ciow7q-n7rums