Question

我正在关注Angular2的Kendo教程。我使用angular-cli工具搭建了我的项目。我成功启用了Progress NPM注册表。我在教程的“入门”部分成功安装并测试了按钮小部件。然后我下载并测试了其他几个组件，包括Chart，Grid，Dropdown和Dialogs。我无法正确显示任何这些组件：

对话框和网格仅显示文本内容，但不显示窗口小部件的图形（窗口，线条，颜色等）。下拉列表显示为空文本框，没有下拉箭头。

作为示例，以下是其中一个图表组件示例的显示方式：

kendo barchart

这是我的app.module.ts代码：

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms'; //
    import { HttpModule } from '@angular/http'; //
    import { ChartsModule } from '@progress/kendo-angular-charts';

    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          FormsModule,  
          HttpModule,  
          ChartsModule
      ],
      providers: [],  //
      bootstrap: [AppComponent]
    })
    export class AppModule { }

这是我的组件代码：

    import {Component} from "@angular/core";

    @Component({
      selector: 'my-app',
      styleUrls: ['./../../node_modules/@progress/kendo-angular-charts/dist/npm/css/main.css'],
      template: `
            <button (click)="toggleSeries()">Toggle second series</button>
            <kendo-chart [transitions]="showTransitions">
              <kendo-chart-series>
                <kendo-chart-series-item [data]="[1, 2, 3, 5]">
                </kendo-chart-series-item>
                <kendo-chart-series-item [data]="[5, 3, 2, 1]" *ngIf="showSeries">
                </kendo-chart-series-item>
              </kendo-chart-series>
            </kendo-chart>
        `
    })
    export class AppComponent {
      private showSeries: boolean = false;
      private showTransitions: boolean = true;

      private toggleSeries() {
        this.showSeries = !this.showSeries;
        this.showTransitions = false;
      }
    }

解决了问题：如Kendo入门教程中所述，安装了样式css

    npm install -S @telerik/kendo-theme-default

但是，不是从Component引用它，而是将它放在angular-cli.json文件中：

    {
      "project": {
        "version": "1.0.0-beta.17",
        "name": "kairos-cli"
      },
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": "assets",
          "index": "index.html",
          "main": "main.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.json",
          "prefix": "app",
          "mobile": false,
          "styles": [
            "styles.css",
            "../node_modules/@telerik/kendo-theme-default/dist/all.css"
          ],
          ...

在angular-cli

0 个答案: