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

Question

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

我有一个包含 HTML 和 SCSS 文件的页面。我在此页面 (datePicker) 上使用了一些 ng-bootstrap 组件。

我可以使用这段代码在 datePicker 中更改 class 的样式。

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

至此一切都很好。

现在我想在 ngOnInit()

上更改此 class .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

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

编辑：

现在你澄清了，唯一的解决方案（但非常 hacky）是这样做：

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

Answer 2

我同意@guerric 你不应该在 Angular 中调用 JavaScript API。要更改 angular 中的样式，您可以使用

[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.width] 这可能是你的 component.ts 文件中的一个函数，它会为你计算宽度和 return 一个字符串.

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

Answer 3

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

日期选择器-basic.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>

日期选择器-basic.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;
  }

}

日期选择器-basic.scss

/* 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

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

how to change style by using javascript on angular

javascript

ionic-framework

ng-bootstrap

angular