Angular4-嵌套组件和；输入误差

我正在努力完成一个来自 “从理论到实践的角度——阿西姆·侯赛因”

作为对我自己的一个挑战，我正试图向前迈进一步，使用Angular CLI重构应用程序，而不是将所有组件都写在同一个文件中；请参阅本书中的示例，但应用程序正在崩溃。到目前为止，我已经创建了两个新组件

// JokeComponent
import { Component, NgModule, OnInit, Input } from '@angular/core';

class Joke {
  public setup: string;
  public punchline: string;
  public hide: boolean;

  constructor(setup: string, punchline: string) {
    this.setup = setup;
    this.punchline = punchline;
    this.hide = true;
  }

  toggle() {
    this.hide = !this.hide;
  }

}

@Component({
  selector: 'joke',
  template: `
    <div class="card card-block">
     <h4 class="card-title">{{data.setup}}</h4>
     <p class="card-text" [hidden]="data.hide">{{data.punchline}}</p>
     <a (click)="data.toggle()" class="btn btn-warning">Tell Me</a>
    </div>
  `
})

export class JokeComponent implements OnInit {
  @Input('joke') data: Joke;

  ngOnInit() {}

}

当我运行ng serve时，出现以下错误： 错误：在../joke-list.component.ts（11.20）中：找不到名称“joke”

在笑话列表中。组件笑话：笑话[]；//找不到名称

---

有人能帮忙吗？

您应该导出类

笑话

，否则不能在文件之外使用：

export class Joke { ... }

除此之外，您还应该在使用

Joke

类的任何地方导入它，例如在

JokeListComponent

中：

import { Joke } from '../joke/joke.component';

---

但是，将

Joke

类移动到自己的文件中，而不是将其放在组件文件中，这样做会更好（大约更好10倍），因为您缺少

Joke

类的导入语句

import {Joke} from '../pathToJokeModel'

---

在“组件笑话”列表中，导入笑话模型

在joke-list.component.ts中

import { Joke } from './joke.component'; // path where is exported class Joke

---

//修改了joke.components.ts导出类joke{…//和joke-list.component.ts从“../joke/joke.component”导入{joke}；

import { Joke } from '../joke/joke.component';

import {Joke} from '../pathToJokeModel'

import { Joke } from './joke.component'; // path where is exported class Joke