Angular12组件库父子组件属性传递在生产环境失效

核心问题定位 #

组件库内部测试时父组件（Dropdown）的label等属性能正常传递给子组件（InputLo），但外部项目导入后仅id属性生效，其余属性传递失效，大概率是组件库编译元数据丢失或外部项目无法识别组件输入属性导致。

修复方案及检查点 #

1. 确保组件库元数据正确导出与编译 #

• 检查public-api.ts：确认父、子组件都已在组件库的入口文件中导出，外部项目才能正确识别组件的输入属性：

  export * from './lib/dropdown/dropdown.component';
  export * from './lib/input/input.component';
  

• 调整编译配置：修改tsconfig.lib.prod.json的angularCompilerOptions，确保元数据完整生成：

  {
    "extends": "./tsconfig.lib.json",
    "compilerOptions": {
      "declarationMap": false
    },
    "angularCompilerOptions": {
      "strictMetadataEmit": true,
      "fullTemplateTypeCheck": true,
      "strictInjectionParameters": true,
      "enableIvy": false // 若使用Angular 12+，可根据情况开启，但需确保外部项目也兼容Ivy
    }
  }
  

• 修正angular.json的build配置：在组件库的生产构建配置中关闭buildOptimizer（临时排查，后续可调试优化）：

  "projects": {
    "your-component-lib": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "buildOptimizer": false,
              "optimization": false,
              "sourceMap": true
            }
          }
        }
      }
    }
  }
  

  重新执行ng build your-component-lib --prod打包组件库。

2. 验证组件元数据是否完整 #

打开组件库打包后dist目录下的.d.ts声明文件（如dist/your-lib/lib/dropdown/dropdown.component.d.ts），确认输入属性已被正确声明：

export declare class Dropdown {
    label: string;
    id: string;
    constructor(public utils: Utils, private logger: Logger, private elemRef: ElementRef);
}

若文件中缺失label等属性，说明编译过程中元数据被意外丢弃，需重新检查编译配置。

3. 排查模板绑定逻辑 #

• 父组件模板中，[attr.id]是绑定DOM原生属性，而[label]是绑定组件输入属性，确保子组件的@Input无拼写或别名错误：

  // 子组件InputLo.ts，确保无别名导致绑定不匹配
  @Input() label: string; // 不要写成@Input('customLabel') label: string;
  

• 可临时改用字符串插值绑定测试：

  <!-- Dropdown组件模板 -->
  <lo-input [attr.id]="id+'_input'" label="{{label}}">
  

4. 版本兼容性检查 #

确保组件库与外部项目的Angular主版本一致（如均为14.x或15.x），跨大版本可能导致元数据解析不兼容。

调试技巧 #

• 在外部项目控制台打印父组件的属性值，确认属性是否传递到父组件：

  console.log(document.querySelector('lo-dropdown').label);
  

• 在父组件中添加ngOnChanges钩子，监听输入属性变化：

  import { OnChanges, SimpleChanges } from '@angular/core';
  
  export class Dropdown implements OnChanges {
      @Input() label: string;
      @Input() id: string;
  
      ngOnChanges(changes: SimpleChanges): void {
          console.log('Dropdown label接收值:', changes.label?.currentValue);
      }
  }
  

  重新打包后在外部项目运行，若控制台能打印label值，说明问题出在父到子的传递；若无法打印，则是外部项目未识别父组件的输入属性。

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