在Angular混合應用程序中降級組件中未識別的camelcase參數

Question

我有一個angularjs 1.6剛剛配置為具有角度8的混合自舉。

我在角度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 at syntaxError （compiler.js：2687）位於JitCompiler._parseTemplate（compiler.js：27526）的TemplateParser.parse（compiler.js：12254），位於eval（compiler.js：27456）的JitCompiler._compileTemplate（compiler.js：27513）位於JitCompiler._compileModuleAndComponents（compiler.js：27365）的Object.then（compiler.js：2678）的eval（compiler.js：27366）的JitCompiler._compileComponents（compiler.js：27456）中的Set.forEach（）

請注意，如果未使用camel case參數，或者其名稱更改為非camel案例名稱，則組件可正常工作。

還試過其他格式，如：

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

但也得到了類似的錯誤

嘗試使用第三方組件時也會發生同樣的情況，在camel情況下使用參數會產生相同的錯誤。

非常感謝，米格爾

編輯以獲取更多信息：

@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