Передать значение из одного шаблона в другой

Я новичок @angular, но я не вижу никаких намеков на то, как передать Input varliable из одного компонента в другой. У меня есть карта, которая принимает объект json в качестве входных данных, и я могу напечатать {{ json.name }} в этом шаблоне, но я не могу передать json.name дочернему компоненту:

  <nb-card-header>
    {{ cardDetails.name }}
  </nb-card-header>
  <ngx-gauge-chart [name]=cardDetails.name></ngx-gauge-chart>

Компонент калибровочной диаграммы:

@Component({
  selector: 'ngx-gauge-chart',
  styleUrls: ['./summary-card.component.scss'],
  template: `
    <div echarts
         class="echart"
         [options]="options">
    </div>
  `,
})
export class GaugeChartComponent implements OnDestroy {
    ngOnDestroy(): void {
      this.alive = false;
    }
    @Input()
    name: string;
  private alive = true;
  options: any;
  themeSubscription: any;

  constructor(private theme: NbThemeService) {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
    this.options = {
      series: [
        {
          startAngle: 180,
          endAngle: 0,
          thick: 15,
          type: 'gauge',
          showSymbol: false,
          data: [{value: 55, name: this.name}],
          axisLabel: {
            show: false,
          },
        },
      ],
      };
    });
  }

}

может ли кто-нибудь дать мне подсказку, как передать cardDetails.name, чтобы его можно было прочитать как вход на компоненте ngx-gauge-chart?


person Mithrand1r    schedule 26.09.2019    source источник
comment
Ваш код выглядит нормально. Не могли бы вы предоставить более подробную информацию?   -  person Kasabucki Alexandr    schedule 26.09.2019
comment
Я думаю, это будет полезно, stackoverflow.com/questions/34803565/   -  person Lahiru Mirihagoda    schedule 26.09.2019
comment
@KasabuckiAlexandr Я добавил код компонента калибровочной диаграммы   -  person Mithrand1r    schedule 26.09.2019
comment
Это должно работать. Не могли бы вы предоставить Stackblitz?   -  person Phat Huynh    schedule 26.09.2019
comment
этого не должно быть, если this.theme.getJsTheme() возвращает наблюдаемую синхронизацию   -  person Kasabucki Alexandr    schedule 26.09.2019


Ответы (2)


Проблема в том, что вы пытаетесь получить доступ к входному параметру в конструкторе. Просто переместите весь код из него в хук ngOnInit жизненного цикла.

person Kasabucki Alexandr    schedule 26.09.2019

Вам следует узнать больше об хуках жизненного цикла.

  • Конструктор вызывается при создании нового экземпляра класса.

  • Все обработчики жизненного цикла, включая ngOnInit, вызываются как часть следующего этапа обнаружения изменений. Обычно логика инициализации компонента требует либо некоторых DI-провайдеров, либо доступных входных привязок, либо визуализированного DOM.

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

Поэтому это не сработало, когда у вас было это в конструкторе.

person Adrita Sharma    schedule 26.09.2019