Angular 6：将@Input添加到组件不起作用

Question

我一定缺少有关@Input ，因为我从Angular CLI收到此错误：

ERROR in app/web/progress/progress-button/progress-button.component.ts(10,4): Error during template compile of 'ProgressButtonComponent'
Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler in 'Input'
'Input' is not initialized at ../@angular/core/src/metadata/directives.ts(855,22).

我的模板包含以下内容：

<button class="btn btn-primary btn-progress"
    (click)="startProgress($event)"
    [myInput]="foobar">TEST
</button>

打字稿包含以下内容：

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

@Component({
  selector: 'app-progress-button',
  templateUrl: './progress-button.component.html',
  styles: []
})
export class ProgressButtonComponent implements OnInit {
  @Input() myInput: string;
  constructor() {}

  ngOnInit() {}

  startProgress(event) {}
}

我在这里想念什么？

UPDATE

遵循以下建议，我相信我抓住了我的错误：

<app-progress-button [myInput]="'foobar'"></app-progress-button>

并在组件中：

<button class="btn btn-primary btn-progress"
    (click)="startProgress($event)">{{myInput}}
</button>

Answer 1

如果 foob​​ar是一个字符串，则添加高逗号“'foobar'”并在该父组件中声明Foobar。 因此，在父模板html中：

应该在父母中：

<app-child [myInput]="'foobar'"> </app-child>

和输入的进口路径似乎是错的或可能有一些特别的东西。