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

Question

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

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

在我想不通之后，我去了 repo 的 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 轻松完成。然后您应该在项目目录中打开终端/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，并按照文档中的说明使用那里的日历。