Невозможно получить доступ к переменным углового ввода без использования "set"

Question

Я новичок в Angular. Мне трудно понять, что здесь происходит. У меня есть два компонента, A и B, и я хочу передать некоторые данные из A в B. В компоненте A у меня есть следующий код:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'comp-a',
  template: `<comp-b [var_x]="var_x"></comp-b>`
})
export class ParentComponent {
  // Info to send to Component B
  var_x: any = 'something'
}

Тогда в компоненте B у меня есть что-то вроде:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'comp-b',
  template: `Info from Component A: {{var_x}}`
})
export class ChildComponent {
  @Input() var_x: any;
}

Проблема в том, что код не работает. Я не могу увидеть значение var_x. Я получаю undefined. Однако, когда я заменяю $Input() на приведенный ниже код, я могу получить значение var_x.

var_x: any;

@Input() set var_x(_var_x: any) {
    this.var_x = _var_x;
}

Я почесал голову, почему это так. Весь мой импорт выглядит нормально. Я не могу на всю жизнь понять, что не так, и я надеюсь, что кто-то там может мне помочь. Спасибо, ребята!

Answer 1

Что такое ошибки в угловых CLI, также ваш селектор компонента должен быть внутри одинарных кавычек, таких как: селектор: 'comp-b', то, что у вас есть, селектор: comp-b '