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是一个字符串，那么添加高逗号＆＃34;＆＃39; foobar＆＃39;＆＃34;并宣布父母组件中的Foobar。所以在父模板html中：

应该是父母：

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

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

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

更新

1 个答案: