角度从代码中删除@Input装饰器

Question

I'm writing code for a class on Angular, and cannot understand why pulling the @Input decorator from my component is causing the entire application not to load.

 import { Component, OnInit, Input } from '@angular/core'; import { Dish } from '../shared/dish'; import { DishService } from '../services/dish.service'; import { Params, ActivatedRoute } from '@angular/router'; import { Location } from '@angular/common'; @Component({ selector: 'app-dishdetail', templateUrl: './dishdetail.component.html', styleUrls: ['./dishdetail.component.scss'] }) export class DishdetailComponent implements OnInit { @Input() dish: Dish; constructor(private dishservice: DishService, private route: ActivatedRoute, private location: Location) { } ngOnInit() { let id = +this.route.snapshot.params['id']; this.dish = this.dishservice.getDish(id); } } 

The input component isn't used anywhere else in the application, and as far as I can tell its not that strongly related even to this component, so can anyone explain why it is that when I remove that decorator, it breaks my program?

Answer 1

If you would just open your browser's console, you would see the big fat error message, saying something like

Can't bind to 'dish' since it isn't a known property of 'app-dishdetail'

Additionally, the error message tells you exactly where you try to bind to dish .