1

在我的 Angular-cli RC5 项目中，我正在尝试创建图表。

  1. 创建了一个新组件作为“图表”
  2. 创建了一个指令为“line-graph.directive.ts”

文件夹结构。

在此处输入图像描述

app.module.ts

import {NgModule, enableProdMode}       from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent}   from './app.component';
import {ChartComponent} from './chart/chart.component';
import {LineGraphDirective} from './chart/line-graph.directive';

@NgModule({
   declarations: [AppComponent, ChartComponent, LineGraphDirective],
   providers: [],
   imports: [],
bootstrap: [AppComponent],
})
export class AppModule {
}

chart.component.html

<p>
 chart works!
</p>

然后，我在 app.component.html 中添加了如下内容。

<app-chart></app-chart>

然后“图表有效！” 当我运行应用程序时应该显示行。

但事实并非如此。

图表组件.ts

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

@Component({
 moduleId: module.id,
 selector: 'app-chart',
 templateUrl: 'chart.component.html',
 styleUrls: ['chart.component.css'],
 directives: []
})
export class ChartComponent {
  constructor() {}
}

线图.directive.ts

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: 'line-graph'
})

export class LineGraphDirective {
  constructor() {}
}

app.component.ts

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

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

关于我的代码做错了什么的任何建议。

谢谢你

4

3 回答 3

1

如果您查看浏览器的网络请求，我敢打赌您在尝试加载图表组件404 not found时会发现一些错误。Angular

您的导入路径不正确。改变

import {ChartComponent} from './chart/chart.component';
import {LineGraphDirective} from './chart/line-graph.directive';

用正确的路径。我很难从您的图像中分辨出文件夹结构（小缩进），但您当前的导入仅在目录与chart目录位于同一文件夹中时才有效AppModule

于 2016-09-05T13:12:20.223 回答
0

您还需要在app.module.ts. 没有它，它不会显示组件的内容。几个小时前我也遇到了这个问题。

所以你app.module.ts应该看起来像这样：

import {NgModule, enableProdMode}       from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent}   from './app.component';
import {ChartComponent} from './chart/chart.component';
import {LineGraphDirective} from './chart/line-graph.directive';

@NgModule({
   declarations: [AppComponent, ChartComponent, LineGraphDirective],
   providers: [],
   imports: [],
bootstrap: [AppComponent,ChartComponent],
})
export class AppModule {
}
于 2016-10-28T14:36:13.933 回答
0

您还必须在 app.component.ts 中导入图表组件。只需添加

import {ChartComponent} from './chart/chart.component';

它肯定会起作用

于 2016-09-07T17:25:27.400 回答