未定义未捕获的引用输入 - @Input() 在 Angular 2 中不起作用

Question

我是一个新手，正在尝试从 ng-book 2(v49) 学习 Angular2。以下是 article.componenets.ts 文件的内容：

import { Component, OnInit } from '@angular/core';
import { Article } from './article.model';

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
 styleUrls: ['./article.component.css'],
 host: {
 class: 'row'
 }
})
export class ArticleComponent implements OnInit {
  @Input() article: Article;



  voteUp(): boolean {
    this.article.voteUp();
    return false;
  }

  voteDown(): boolean {
    this.article.voteDown();
    return false;
  }

  ngOnInit() {
  }

}

这是 angular-cli 上的错误：

ERROR in C:/Users/saad/Desktop/books/Angular JS2/angular2Reddit/src/app/article/article.component.ts (13,4): Cannot find name 'Input'.)
webpack: Failed to compile.

Answer 1

如果你想使用它，你必须导入 Input :

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

Answer 2

您缺少输入指令的导入，因此将第一行更改为

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

最好为 @Input 参数设置一些值，否则您最终会在应用程序的某些地方出现 未处理的承诺错误。

为此，它可以在您的 ngOnInit 或 constructor

中定义

ngOnInit() {
   this.article={
         id: 0
         .....
   };
}

或

constructor(....) {
   this.article={
         id: 0,
         .....
   };
}

未定义未捕获的引用输入 - @Input() 在 Angular 2 中不起作用

Uncaught Reference Input is not defined- @Input() not working in Angular 2

typescript

angular2-inputs

angular