Question

我正在努力完成一项练习 “从理论到实践的角度 - Asim Hussain” https://codecraft.tv/courses/angular/quickstart/nesting-components-and-inputs/

作为对自己的挑战，我试图向前迈出一步，使用Angular CLI重构应用程序，而不是在同一个文件中编写所有组件;请参阅书籍http://plnkr.co/edit/LKj9OAoUMIUZhDS5HAiP?p=preview中的示例，但应用程序崩溃了。到目前为止，我已经创建了两个新组件

// 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() {}

}

// JokeListComponent

import { Component, OnInit, Output } from '@angular/core';
import { JokeComponent } from '../joke/joke.component';

@Component({
  selector: 'joke-list',
  template: '<joke *ngFor="let j of jokes" [joke]="j"></joke>'
})

export class JokeListComponent implements OnInit {

  @Output() jokes: Joke[];

  constructor() {
    this.jokes = [
      new Joke("Joke 1", "Joke One Body")
    ];
  }
  ngOnInit() {}
}

这就是我的AppComponent＆amp; AppModule看起来像

import { Component } from '@angular/core';
import { JokeListComponent } from '././joke-list/joke-list.component';

//AppComponent
@Component({
  selector: 'app',
  template: `
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
         <h4>Jokes App</h4>
         <hr>
         <joke-list></joke-list>
        </div>
      </div>
    </div>
  `
})
export class AppComponent {

}

// AppModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { JokeComponent } from './joke/joke.component';
import { JokeListComponent } from './joke-list/joke-list.component';

@NgModule({
  declarations: [
    AppComponent,
    JokeComponent,
    JokeListComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

当我运行服务时，我收到以下错误：错误：在../joke-list.component.ts(11.20）：找不到名字'笑话'

在joke-list.component笑话：Joke []; //找不到名字

有人可以帮忙吗？

Answer 1

您应该导出类Joke，否则无法在文件外部使用：

export class Joke { ... }

除此之外，您还应该在使用Joke课程的任何地方导入它，例如在JokeListComponent中：

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

但是将Joke类移动到自己的文件，而不是将其放在组件文件中会更好（比如10倍更好）

Answer 2

您缺少Joke类

的import语句

import {Joke} from '../pathToJokeModel'

Answer 3

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

在joke-list.component.ts

中

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

Angular4 - 嵌套组件＆amp;输入错误

3 个答案: