angularjs - Not recognized camelcase parameters in downgraded component in an Angular hybrid application
问题描述
I have a angularjs 1.6 that has just been configured to have hybrid bootstrap with angular 8.
I created 2 new components DriverDetail and DriverDetailLine both in angular 8:
@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 is downgraded to be used from angularjs like this:
app.directive(
'driverDetail',
downgradeComponent({ component: DriverDetail, inputs: ['driver'] }) as angular.IDirectiveFactory,
);
When DriverDetailLine is used inside DriverDetail passing the titleKey input parameter:
<driver-detail-line [titleKey]="'IN_TRANSIT'" [icon]="'directions_car'">
</driver-detail-line>
This error is produced:
Uncaught Error: Template parse errors: Can't bind to 'title-key' since it isn't a known property of 'driver-detail-line'. 1. If 'driver-detail-line' is an Angular component and it has 'title-key' input, then verify that it is part of this module. 2. If 'driver-detail-line' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" test ][title-key]="'DRIVER_DASHBOARD.IN_TRANSIT'" [icon]="'directions_car'"> {{ 'LABEL"): ng:///DriverDetailModule/DriverDetail.html@0:51 at syntaxError (compiler.js:2687) at TemplateParser.parse (compiler.js:12254) at JitCompiler._parseTemplate (compiler.js:27526) at JitCompiler._compileTemplate (compiler.js:27513) at eval (compiler.js:27456) at Set.forEach () at JitCompiler._compileComponents (compiler.js:27456) at eval (compiler.js:27366) at Object.then (compiler.js:2678) at JitCompiler._compileModuleAndComponents (compiler.js:27365)
Note that the components work correctly if the camel case parameter is not used, or if its name is changed to a non-camel case name.
Have also tried in other formats like:
[title-key]="'IN_TRANSIT'"
[titlekey]="'IN_TRANSIT'"
But also got a similar error
The same happens when trying to use a third party component, when using a parameter in camel case it will produce the same error.
Many thanks, Miguel
Edit for more information:
@NgModule({
imports: [],
declarations: [
DriverDetail,
DriverDetailLine
],
entryComponents: [
DriverDetail,
DriverDetailLine
]
})
export class DriverDetailModule {
}
解决方案
我终于找到了问题所在,问题中显示的代码是正确的。问题出在 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
推荐阅读
- tmux - 脚本完成后 Tmux 窗格意外关闭
- c# - 在第三方地址上服务 AutoDiscoverUrl
- python-3.7 - 通过 python rest api jira 创建问题
- java - 在 Java 中查找内置搜索的迭代/计数器
- laravel - Laravel 块发布请求方法
- azure - Azure 语音到带有数字的文本
- java - 切换到 1.3-groovy-2.5 而不是 ASTTransformation 中的 Nullpointer 后 Spock 测试未运行
- php - 身份验证重试
- python - winrm 或未安装请求:无法使用已安装的 pywinrm 导入名称证书
- php - 使用 .htaccess 重写 URL 传递多个参数