@Input и @Output всегда неопределены в Angular-Cli

Question

Любые значения внутри отдельных лиц печатаются без проблем, но все, что получается с помощью @Input или @Output, не отображается.

child.component.ts

@Component({
  selector: 'app-form-input',
  templateUrl: './form-input.component.html',
  styleUrls: ['./form-input.component.scss']
})

export class FormInputComponent implements OnInit {
    @Input() fieldType: string;
    //with another Input and 1 Output DOM

 constructor(
    ) {
    }

    ngOnInit() {
        console.log(this.fieldType);
    }
}

parent.component.html

<app-form-input (value)="action($event)"
    [fieldType]="date"
    [maxAllowItem]="1">
</app-form-input>

Что-то не так в синтаксисе? В журнале всегда отображается «неопределенное» во всех случаях.

Спасибо

Answer 1

Я думаю, что это пытается получить переменную, определенную в вашем компоненте.

Попробуйте следующий синтаксис, снова оберните строку, это должно гарантировать, что вы передаете строку, а не переменную из компонента, тогда входные данные будут знать, что ожидается строка.

[fieldType]="'date'"

Это перенос строки в " и '.

Answer 2

Вам может потребоваться инициализировать начальные значения переменных @Input и @Output внутри компонента, поскольку свойства @Input будут undefined, если они не предоставлены извне, а свойства @Output необходимо инициализировать с помощью EventEmitter

Также вам необходимо проверить значения внутри ngOnChanges, которые будут выполнены во время обнаружения изменений

Ваш код будет таким:

@Component({
  selector: 'app-form-input',
  templateUrl: './form-input.component.html',
  styleUrls: ['./form-input.component.scss']
})

export class FormInputComponent implements OnInit {
    @Input() fieldType: string;
    @Output() event: EventEmitter<any>
    //with another Input and 1 Output DOM

    constructor() {
       this.fieldType = ''
       this.event = new EventEmitter()
    }
    ngOnInit() {

    }
    ngOnChanges() { // <- it will run every time and give you the latest value of fieldType
      console.log(this.fieldType);
    }
}