使用输入将数据从父组件传递到子组件，如何实现？

Question

有一个具有图表所有逻辑的父组件，您需要使用@ any ()将数据传递给子组件，这样我就可以使用@Input在任何组件中显示图表。

父组件是logs.component，子组件是echarts.component。有必要将数据传递给LoadEcharts()，它包含图表的所有逻辑，也就是说，我可以在任何html组件上调用它

logs.components.ts

export class LogsComponent implements OnInit {
  sideNavStatus: boolean = false;
  subscription!: Subscription;
  logs!: Logs[];


  constructor(private dataService: DataService) {
  }

  columnDefs = [
    { headerName: 'Username', field: 'username', flex: 1},
    { headerName: 'Event', field: 'event', flex: 1 },
    { headerName: 'Date', field: 'date', flex: 1 }
  ];

  ngOnInit() {
    this.LoadLogs();
    this.LoadEcharts();
  }

  LoadLogs(): void {
    this.dataService.getLogs().subscribe(logs => this.logs = logs);
  }

  LoadEcharts(): void {
    const chartDom: HTMLElement = document.getElementById('main') as HTMLElement;
    const myChart = echarts.init(chartDom);

    this.subscription = this.dataService.getLogs().subscribe(data => {
      myChart.setOption(this.initBasicEchart(data))
    })
  }

  private initBasicEchart(data: Logs[]) {

    const result: any = {};

    data.forEach(el => {
      const date = el.date.toString().substring(0, 10);
      if (!result[el.event]) {
        result[el.event] = {};
        if (!result[el.event][date]) {
          result[el.event][date] = 1;
        }
      } else {
        if (!result[el.event][date]) {
          result[el.event][date] = 1;
        } else {
          result[el.event][date] += 1;
        }
      }
    });

    const login = {
      x: Object.keys(result.Login),
      y: Object.values(result.Login)};

    const reg = {
      c: Object.keys(result.Registration),
      z: Object.values(result.Registration)};

    return {
      title: {
        text: 'Graphic login and registration.'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: (reg.c, login.x)
      },
      yAxis: {
      },
      series: [
        {
          name: 'Login',
          type: 'bar',
          data: login.y,
        },
        {
          name: 'Registration',
          type: 'bar',
          data: reg.z,
        }
      ]
    };
  }
}

logs.component.html

<div class="container-fluid g-0">
    <app-header (sideNavToggled)="sideNavStatus = $event;"></app-header>

    <main>
        <app-sidebar [sideNavStatus]="sideNavStatus"
                     [ngClass]="{'app-side-nav-open': sideNavStatus}"></app-sidebar>

        <div class="display-area p-3" [ngClass]="{'display-area-shrink': sideNavStatus}">
            <p class="fs-1 fw-bold fst-italic text-center">Login and registration statistics.
            </p>

            <app-aggreed
                    *ngIf="logs"
                    [logs]="logs"
                    [columnDefs]="columnDefs"
            ></app-aggreed>

        </div>
    </main>
</div>

<app-echarts

></app-echarts>

<app-footer></app-footer>

echarts.component.html

<div class="container-fluid g-0">
    <app-header (sideNavToggled)="sideNavStatus = $event;"></app-header>

    <main>
        <app-sidebar [sideNavStatus]="sideNavStatus"
                     [ngClass]="{'app-side-nav-open': sideNavStatus}"></app-sidebar>

        <div class="display-area p-3" [ngClass]="{'display-area-shrink': sideNavStatus}">

            <div
                    id="main"
                    style="width: 500px; height: 300px"

            >
            </div >
        </div>
    </main>
</div>

<app-footer></app-footer>

export class EchartsComponent implements OnInit {
  sideNavStatus: boolean = false;
  subscription!: Subscription;


  constructor(private dataService: DataService) {
  }


  ngOnInit(): void {
    
  }
}

我试图通过输入将方法传递给子组件，但是没有结果。

Answer 1

从您的代码示例中，我假设您试图访问日志组件中的EchartsComponent ViewChild并将数据传递给它。

下面是一个如何做到这一点的示例，减去示例代码中的一些片段以求简洁.

class LogsComponent {

  @ViewChild(EchartsComponent)
  echartsComponent: EchartsComponent;

  LoadEcharts(): void {
    const chartDom: HTMLElement = document.getElementById('main') as HTMLElement; // <-- not sure what this is
    const myChart = echarts.init(chartDom);  // <-- not sure what this is

    this.subscription = this.dataService.getLogs().subscribe(data => {
      this.echartsComponent.logs = data;
      // `logs` doesn't exist in the current code for EchartsComponent.
      // You'll need to add it.
    });
  }

}

我在您的EchartsComponent中看不到的是要设置的logs属性。如果在父组件中使用ViewChild，则不必对ViewChild实例使用@Input，可以对组件进行编程访问，并可以设置属性或调用方法。

如果您想使用@Input()，也可以这样做：

class EchartsComponent {
  @Input()
  logs: Logs[];
}

// logs.component.ts

class LogsComponent {

  LoadEcharts(): void {
    this.subscription = this.dataService.getLogs().subscribe(data => {
      this.logs = data;
    })
  }
}

// logs.component.html

<app-echarts [logs]="logs"></app-echarts>

在这个场景中，当getLogs()的可观测值发出时，属性日志被设置为新值。该值是一个新的引用，通过它的输入传递给子组件。

希望这能帮到你。