未定义的引用输入未定义-@Input()在Angular 2中不起作用 [英] Uncaught Reference Input is not defined- @Input() not working in Angular 2

问题描述

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

I am a newbie trying to learn Angular2 from ng-book 2(v49). Here are the contents of article.componenets.ts file:

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上的错误:

Here is the error on the 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.

推荐答案

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

You are missing import for the Input directive, so change the first line as

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

好的做法是使@Input参数具有一定的值，否则最终将在应用程序中的某些位置出现未处理的承诺错误.

It is good practice to have the @Input parameters with some value else you will end up getting Unhandled promise error some where in your application.

为此，可以在您的 ngOnInit 或构造函数

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

或

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

这篇关于未定义的引用输入未定义-@Input()在Angular 2中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！