как изменить стиль с помощью javascript на angular - PullRequest
Новая
       6

как изменить стиль с помощью javascript на angular

0 голосов
/ 24 марта 2020

Я создаю приложение ioni c с использованием angular.

У меня есть страница с файлами HTML и S CSS. На этой странице я использую некоторые компоненты ng- bootstrap (datePicker).

С помощью этого кода я могу изменить стиль класса внутри datePicker. 

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

Все в порядке.

теперь я хочу изменить width этого класса .ngb-dp-day на ngOnInit()

Я пробовал этот код, но это не работает, попробуйте исправить это для меня здесь:

См .: 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';
      }

    }

Вопрос:

как изменить CSS элемента ::ng-deep .ngb-dp-day?

См .: https://stackblitz.com/edit/angular-ciow7q-n7rums

Пожалуйста, помогите мне.

Ответы [ 3 ]

1 голос
/ 24 марта 2020

Я согласен с @ guerri c Вы никогда не должны вызывать JavaScript API в Angular. Чтобы изменить стиль в 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, которая вычислит ширину для вас и вернет строку. 

<div [style.width]="getWidth(this)"></div>
0 голосов
/ 25 марта 2020

Я решил это с помощью пользовательского шаблона для элемента дня

datepicker-basi c. 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>

datepicker-basi c .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;
  }

}

datepicker-basi c .s css

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

0 голосов
/ 24 марта 2020

Вы никогда не должны вызывать JavaScript API в Angular, попробуйте вместо этого [style.width.px]="widthPerDay" в шаблоне.

Редактировать:

Теперь вы пояснили, что Единственное решение (но очень хакерское) - сделать это: 

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