IgniteUI 日历不加载 Angular 中的任何样式

Question

我在尝试在 Angular 上使用 IgniteUI 时遇到了一个奇怪的问题。无论我尝试什么，该组件都会由于某种原因无法正确渲染。这是组件类：

import { Component, ViewChild, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import {ApiService} from "../api.service";
import { IgxCalendarComponent, DateRangeType } from 'igniteui-angular';

@Component({
  selector: 'app-calendarform',
  templateUrl: './calendarform.component.html',
  styleUrls: ['./calendarform.component.css']
})
export class CalendarformComponent implements OnInit {
  @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent;
  public today = new Date(Date.now());

  ngOnInit() {
    this.calendar.disabledDates = [{
      type: DateRangeType.Between,
      dateRange: [
        new Date(1, 1, 1),
        new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDay())
      ]
    }];
  }

  constructor(private router: Router, private service: ApiService) {

  }

  public onSelection(dates: Date | Date[]) {
    console.log(JSON.stringify(dates));
  }

}

这是 html:

<div class="calendar-section">
  <article class="calendar-wrapper">
    <igx-calendar #calendar selection="single" (selected)="onSelection($event)" [showWeekNumbers]="true"></igx-calendar>
  </article>
</div>

这是CSS：

.calendar-wrapper {
  max-width: 400px;
  min-width: 200px;
  margin: 8px;
}

.igx-calendar {
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), 0 1px 1px 0 rgba(0,0,0,.12), 0 2px 1px -1px rgba(0,0,0,.08);
}

我已经尝试了我能想到的一切，我在 angular.js 中添加了 igniteui-angulr.css 导入，但没有任何改变。由于某种原因，日历麦粒肿不会被渲染。 另外一件奇怪的事情是，无论我点击什么日期，都是选择它之前的那个日期。 这是它的样子和应该是什么样子的比较

Answer 1

请尝试在构建选项内的 angular.json 中添加

 "stylePreprocessorOptions": { "includePaths": ["node_modules/"] },

并在样式内添加

{ "input": "./node_modules/igniteui-angular/styles/igniteui-angular.css", "inject": true }