角度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) {}
}

我在这里错过了什么？

更新

按照以下建议，我相信我抓住了我的错误：

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

在组件中：

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

Answer 1

如果foobar 是一个字符串，请添加高逗号 "'foobar'" 并声明 该父组件中的 Foobar。所以在父级的模板 html 中：

应该在父级中：

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

输入导入路径似乎是错误的，或者可能是那里的一些特殊的东西。