3

我正在关注 Angular2 的剑道教程。我已经使用 angular-cli 工具搭建了我的项目。我成功启用了 Progress NPM 注册表。我在教程的“入门”部分成功安装并测试了按钮小部件。然后我下载并测试了其他几个组件，包括图表、网格、下拉菜单和对话框。我无法让这些组件中的任何一个正确显示：

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

例如，以下是图表组件示例之一的出现方式：

剑道条形图

这是我的 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;
      }
    }

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

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

但是，我没有从组件中引用它，而是将它放在 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"
          ],
          ...
4

0 回答 0