Angular 6: Добавление @Input к компоненту не работает - PullRequest
Новая
       11

Angular 6: Добавление @Input к компоненту не работает

0 голосов
/ 06 июня 2018

Я должен что-то упустить из-за @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>

1 Ответ

0 голосов
/ 06 июня 2018

Если foobar - строка, поэтому добавьте запятую "foobar" и объявите Foobar в этом родительском компоненте.Таким образом, в шаблоне html родительского элемента:

Если должно быть в родительском элементе: 

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

И входной путь импорта кажется неправильным или может бытькакая-то особенная вещь там.

...