如何在 Angular 17 中使用 PrimeNG 日历组件？

Question

我正在尝试将 PrimeNG 日历组件集成到我的 Angular 17 项目中，但我无法找到合适的步骤。有人可以指导我如何在 Angular 17 中正确使用 PrimeNG 日历组件吗？任何帮助将不胜感激！

我已按照 PrimeNG 文档上的说明进行操作，但仍然无法使其工作。

Answer 1

好的，步骤如下：

• 确保 PrimeNg 的样式是通过 styles.scss 或 angular.json 加载的：

@import 'primeicons/primeicons.css';
@import 'primeng/resources/primeng.css';
@import 'primeflex/primeflex.css';
@import 'assets/themes/lara/lara-light/blue/theme.scss';
@import 'assets/themes/mytheme/theme.scss';

/*@import 'assets/themes/material/material-light/compact/indigo/theme.scss';*/

• 将 BrowserAnimationsModule 添加到您的应用程序中：

providers: [provideRouter(routes), importProvidersFrom(BrowserAnimationsModule)]

• 导入 CalendarModule 和 FormsModule 或 ReactiveFormsModule

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CalendarModule, FormsModule],

• 然后您只需将日历组件添加到您自己的组件中即可：

<div class="card flex justify-content-center">
  <p-calendar [(ngModel)]="date"></p-calendar>
</div>