Question

我有一个angularjs 1.6，它刚刚配置为具有角度8的混合引导程序。

我在角度8中创建了两个新组件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.要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。（“ test] [title-key] =”'DRIVER_DASHBOARD.IN_TRANSIT'“ [icon] =”'directions_car'“> {{'LABEL”）：ng：///DriverDetailModule/DriverDetail.html@0：51 在语法错误（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 {
}

Answer 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

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

1 个答案: