web-dev-qa-db-fra.com

Angular 6: L'ajout de @Input au composant ne fonctionne pas

Il me manque quelque chose à propos de @Input, car j’obtiens cette erreur de 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).

Mon modèle contient ceci:

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

Et le TypeScript contient ceci:

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

Qu'est-ce que j'oublie ici? 

METTRE À JOUR

En suivant les conseils ci-dessous, je crois avoir compris mon erreur:

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

et dans le composant:

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

Si foobar est une chaîne, ajoutez une virgule haute "'foobar'" et déclarez Foobar dans ce composant parent. Donc dans le template html du parent: 

Devrait être dans le parent:

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

Et le chemin d'importation des entrées semble être faux ou est peut-être quelque chose de spécial là-bas.

2
shortQuestion