Question

我是新手@angular，但是我看不到有关如何将Input从一个组件传递到另一个组件的任何提示。我有一张以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组件上的输入读取吗？

Answer 1

问题是您尝试访问构造函数中的输入参数。只需将整个代码移到ngOnInit生命周期挂钩中即可。

Answer 2

您应该阅读有关Life Cycle Hooks

的更多信息

构造函数。
所有生命周期挂钩（包括 ngOnInit ）都被称为以下更改检测阶段的一部分。通常，组件初始化逻辑需要一些DI提供程序或可用的输入绑定或呈现的DOM
@Input 通信机制是在后续更改检测阶段的一部分进行处理的，因此输入绑定在构造函数中不可用。

因此，当您在构造函数中使用它时，它将不起作用。

将值从一个模板传递到另一个

2 个答案: