Angular 混合应用程序中降级组件中无法识别的驼峰式参数

Posted 2023-02-19

【中文标题】Angular 混合应用程序中降级组件中无法识别的驼峰式参数

【英文标题】：Not recognized camelcase parameters in downgraded component in an Angular hybrid application

【发布时间】：2019-11-24 10:30:29

【问题描述】：

我有一个 angularjs 1.6，刚刚配置为具有 angular 8 的混合引导。

我在 Angular 8 中创建了 2 个新组件 DriverDetail 和 DriverDetailLine：

@Component(
    selector: 'driver-detail',
    template: require('./driver-detail.component.html')
)
export class DriverDetail 
    @Input('driver') driver: Driver;

    constructor() 

@Component(
    selector: 'driver-detail-line',
    template: require('./driver-detail-line.component.html')
)
export class DriverDetailLine 
    @Input('titleKey') titleKey;
    @Input('icon') icon;

    constructor() 

DriverDetail 被降级为像这样从 angularjs 使用：

app.directive(
    'driverDetail',
    downgradeComponent( component: DriverDetail, inputs: ['driver'] ) as angular.IDirectiveFactory,
);

在DriverDetail中使用DriverDetailLine时传递titleKey输入参数：

<driver-detail-line [titleKey]="'IN_TRANSIT'" [icon]="'directions_car'">
</driver-detail-line>

产生此错误：

未捕获的错误：模板解析错误： 无法绑定到“title-key”，因为它不是“driver-detail-line”的已知属性。 1. 如果 'driver-detail-line' 是一个 Angular 组件并且它有 'title-key' 输入，那么验证它是这个模块的一部分。 2. 如果“driver-detail-line”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 (" test ][title-key]="'DRIVER_DASHBOARD.IN_TRANSIT'" [icon]="'directions_car'"> 'LABEL"): ng:///DriverDetailModule/DriverDetail.html@0:51 在 syntaxError (compiler.js:2687) 在 TemplateParser.parse (compiler.js:12254) 在 JitCompiler._parseTemplate (compiler.js:27526) 在 JitCompiler._compileTemplate (compiler.js:27513) 在 eval (compiler.js:27456) 在 Set.forEach() 在 JitCompiler._compileComponents (compiler.js:27456) 在 eval (compiler.js:27366) 在 Object.then (compiler.js:2678) 在 JitCompiler._compileModuleAndComponents (compiler.js:27365)

请注意，如果不使用驼峰式大小写参数，或者将其名称更改为非驼峰式大小写名称，则组件可以正常工作。

也尝试过其他格式，例如：

[title-key]="'IN_TRANSIT'"
[titlekey]="'IN_TRANSIT'"

但也遇到了类似的错误

尝试使用第三方组件时也会发生同样的情况，在驼峰式中使用参数时会产生相同的错误。

非常感谢， 米格尔

编辑以获取更多信息：

@NgModule(
    imports: [],
    declarations: [
        DriverDetail,
        DriverDetailLine
    ],
    entryComponents: [
        DriverDetail,
        DriverDetailLine
    ]
)
export class DriverDetailModule 

【问题讨论】：

您是否在DriverDetailModule 中声明了DriverDetailLine 组件？

嗨@yurzui，是的，我在模块中声明了它。已使用模块代码编辑了问题。只要我不使用camelcase中的输入参数，这些模块就可以工作，所以我认为它们被正确声明了

【参考方案1】：

我终于找到了问题所在，问题中显示的代码是正确的。 问题出在 webpack 构建过程中，对于 html，它使用 webpack html-loader，配置如下：

    test: /\.html$/,
    use: [
    
        loader: 'html-loader',
        options: 
            minimize: true
        
    

最小化选项破坏了驼峰式属性。 不指定选项或将其设置为 false 可以解决问题。

我发现“caseSensitive”选项（默认为 false）是负责任的。如果您想保留缩小过程：

    test: /\.html$/,
    use: [
    
        loader: 'html-loader',
        options: 
            minimize: true,
            caseSensitive: true
        
    

来源：

https://webpack.js.org/loaders/html-loader

https://github.com/kangax/html-minifier#options-quick-reference