Angular中SharedModule声明后Graph组件数据绑定异常问题

将原本仅在单个组件中使用的Graph组件移至SharedModule，并从原模块的declarations中移除后，组件虽已加载，但Plotly所需的data、config、layout绑定未在页面HTML中生效，无法正常渲染图表。相关代码如下：

SharedModule.ts代码 #

@NgModule({
    declarations: [
      SelectFilterComponent,
      MapMenuComponent,
      NameValueElementComponent,
      GraphComponent // 目标Graph组件
    ],
    imports: [
      CommonModule,
      // 其他导入模块
    ],
    exports: [
      SelectFilterComponent,
      CommonModule,
      // 其他导出项
      GraphComponent // 已导出Graph组件
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class SharedModule {
    static forRoot():ModuleWithProviders<SharedModule>{
      return {
        ngModule:SharedModule,
        providers: [// 服务提供者]
      };
    }
  }

使用Graph组件的模板片段 #

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full mt-8">
       <div graph 
              <!-- 各类绑定与样式 -->
       ></div>
</div>

原模块（MeteoStationDetailModule）代码 #

@NgModule({
  declarations: [
    // 其他组件（已移除GraphComponent）
  ],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: ':id', component: MeteoStationContainerComponent}
    ]),
    SharedModule,
    // 其他导入模块
  ],
  providers: [// 服务提供者]
})
export class MeteoStationDetailModule { }

1. 确保GraphComponent正确暴露输入属性 #

在graph.component.ts中，为Plotly所需的data、config、layout定义@Input()装饰器，开放数据传入通道：

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

@Component({
  selector: 'div[graph]',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.css']
})
export class GraphComponent {
  // 定义输入属性，接收父组件传递的数据
  @Input() data: any[] = [];
  @Input() config: any = {};
  @Input() layout: any = {};

  // 可选：在初始化时校验数据是否传入
  ngOnInit() {
    console.log('Received data:', this.data);
    console.log('Received config:', this.config);
    console.log('Received layout:', this.layout);
  }
}

2. 修正模板中的绑定语法 #

使用Angular标准属性绑定语法传递数据，避免原生HTML属性的写法：

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full mt-8">
       <div graph 
              [data]="plotData" 
              [config]="plotConfig" 
              [layout]="plotLayout"
              <!-- 其他样式 -->
       ></div>
</div>

其中plotData、plotConfig、plotLayout是父组件（如MeteoStationContainerComponent）中定义的对应数据变量。

3. 校验SharedModule导出配置 #

确认SharedModule的exports数组确实包含GraphComponent（你的代码已配置，此步为二次验证），保证导入SharedModule的子模块能正常访问该组件。

4. 懒加载模块的配置规范 #

由于项目采用懒加载，子模块（如MeteoStationDetailModule）直接导入SharedModule即可，无需调用SharedModule.forRoot()——forRoot()仅需在根模块（AppModule）中调用一次，用于注册全局服务，避免重复实例化。

5. 调试数据传递链路 #

如果数据仍未正常传递，可在GraphComponent的ngOnChanges钩子中监听属性变化，定位问题节点：

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

// ...组件定义

ngOnChanges(changes: SimpleChanges) {
  if (changes['data']) {
    console.log('Data changed:', changes['data'].currentValue);
  }
}

内容的提问来源于stack exchange，提问作者nonnodacciaio