javascript - 在 Angular 4 CLI 项目中实现 Angular-calendar

Question

Angular 新手 - 无法在此处找到此 Angular 日历组件 https://github.com/mattlewis92/angular-calendar实现到我的项目中。

我正在使用 Angular CLI 设置一个基本项目。按照入门指南，我不知道如何或在哪里包含 .css 文件。我已经尝试了几个地方。

在我无法弄清楚之后，我转到了存储库的 build-tools/angular-CLI 页面并克隆了它。我假设这是一个使用 Angular CLI 创建的基本项目？

当我为这个项目提供服务时，它只是一个日历。缺少很多我想要的功能，在这里找到 -

https://mattlewis92.github.io/angular-calendar/#/kitchen-sink

看起来像这样

有人可以帮助我在刚刚使用 Angular CLI 创建的项目中实现日历吗？与这里的外观非常相似 -

https://mattlewis92.github.io/angular-calendar/#/kitchen-sink

谢谢

Answer 1

这是一个 npm 包，因此首先您应该创建 Angular 项目，您可以通过 Angular CLI ng new 轻松完成。然后，您应该在项目目录中打开terminal/bash并执行npm i，然后执行npm i --save angular-calendar。

转到AppModule.ts并添加日历模块，appModule中的代码应该是这样的:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
import { CalendarModule } from 'angular-calendar';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    CalendarModule.forRoot()
  ]
})
export class MyModule {}

然后转到项目根目录中的文件 .angular-cli.json 。找到 styles 部分并在其中添加 node_modules/angular-calendar/dist/css/angular-calendar.css 。

应该是这样的:

"styles": [
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/simple-line-icons/css/simple-line-icons.css",
        "../node_modules/angular-calendar/dist/css/angular-calendar.css",
        "scss/style.scss"
      ],

然后返回到项目根目录，例如生成一个组件 ng g component calendComp 并按照文档中的描述使用那里的日历。