Угловое удаление декоратора @Input из кода

Question

Я пишу код для класса на Angular и не могу понять, почему при извлечении декоратора @Input из моего компонента все приложение не загружается.

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);
  }

}

Компонент ввода не используется нигде в приложении, и, насколько я могу судить, он не так сильно связан даже с этим компонентом, поэтому любой может объяснить, почемуэто то, что когда я удаляю этот декоратор, он ломает мою программу?

Answer 1

Если вы просто откроете консоль вашего браузера, вы увидите большое жирное сообщение об ошибке, в котором будет указано что-то вроде

Невозможно привязать «тарелку», поскольку она не известна'app-dishdetail'

Кроме того, в сообщении об ошибке указывается, где именно вы пытаетесь привязаться к dish.