SAP Commerce v2205中SmartEdit数字类型字段映射替换方案咨询

背景 #

我将SAP Hybris/Commerce从v1808版本升级至v2205版本。此前在自定义SmartEdit扩展中，通过AngularJS服务修改了数字类型的编辑器模板，使其支持0值。

原AngularJS代码如下：

angular
    .module('newGenericEditorConfigurationServiceModule', ['editorFieldMappingServiceModule', 'newsmarteditContainerTemplates'])
    .service('newGenericEditorConfigurationService', function(editorFieldMappingService) {

        this.overrideDefaultEditorFieldMappings = function() {
            editorFieldMappingService.addFieldMapping('Number', null, null, {
                template: 'newNumberTemplate.html'
            });
        };

    });

由于v2205版本中SmartEdit已从AngularJS升级为Angular，上述服务不再生效。我尝试了官方文档中的Angular代码：

// 省略部分代码

import { SeEntryModule, EditorFieldMappingService, moduleUtils } from 'smarteditcommons';

// 省略部分代码
@NgModule({
    imports: [BrowserModule, UpgradeModule],
    declarations: [],
    entryComponents: [],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: DummyInterceptor,
            multi: true
        },
        moduleUtils.bootstrap(
            (editorFieldMappingService: EditorFieldMappingService) => {
                // Adds the mapping. With this the new widget will be used for all fields of type "Range"
                editorFieldMappingService.addFieldMapping('Range', null, null, {
                    template: 'rangeFieldTemplate.html'
                });
            },
            [EditorFieldMappingService]
        )
    ]
})
export class SmartedittrailContainerModule {}

但仍无法替换原有模板。另外一篇官方文档仍使用旧AngularJS语法，未说明如何与新Angular模块关联：

angular.module('trainingModule',  ['editorFieldMappingServiceModule', 'smartedittrail/cmssmarteditContainerTemplates'])
    .run(function(editorFieldMappingService) {
        editorFieldMappingService.addFieldMapping('Integer', null, null, {
            template: 'web/featureExtensions/smartedittrail/cmssmarteditContainer/integer-editorTemplate.html'
        });
    });

解决方案 #

步骤1：创建自定义Angular组件（推荐方式） #

替代原HTML模板，创建一个能正确处理0值的Angular组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'custom-number-editor',
    template: `
        <input 
            type="number" 
            [(ngModel)]="value" 
            (ngModelChange)="onValueChange($event)"
            placeholder="输入数字"
        />
    `
})
export class CustomNumberEditorComponent {
    @Input() value: number;
    @Output() valueChange = new EventEmitter<number>();

    onValueChange(newValue: number) {
        // 确保0值能被正确触发并传递
        this.valueChange.emit(newValue);
    }
}

步骤2：在容器模块中注册组件并配置映射 #

在自定义SmartEdit容器模块中，声明组件并通过EditorFieldMappingService完成数字类型的映射替换：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { SeEntryModule, EditorFieldMappingService, moduleUtils } from 'smarteditcommons';
import { CustomNumberEditorComponent } from './custom-number-editor.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        SeEntryModule
    ],
    declarations: [CustomNumberEditorComponent],
    entryComponents: [CustomNumberEditorComponent], // Angular 9+可省略，改用standalone组件或动态导入
    providers: [
        moduleUtils.bootstrap(
            (editorFieldMappingService: EditorFieldMappingService) => {
                // 替换Number类型的编辑器映射
                editorFieldMappingService.addFieldMapping(
                    'Number', 
                    null, 
                    null, 
                    {
                        component: CustomNumberEditorComponent // 直接绑定Angular组件
                    }
                );
            },
            [EditorFieldMappingService]
        )
    ]
})
export class CustomSmartEditContainerModule {}

备选方案：使用HTML模板文件 #

如果坚持使用原HTML模板，需将newNumberTemplate.html放置在扩展的web/webroot/assets目录下，然后在映射中使用正确的资源路径：

editorFieldMappingService.addFieldMapping('Number', null, null, {
    template: 'assets/newNumberTemplate.html'
});

步骤3：验证扩展配置 #

确保自定义SmartEdit扩展的extensioninfo.xml中正确依赖smarteditcommons及相关容器扩展，并且Angular模块已注册到SmartEdit的扩展注册表中。

关键注意点 #

• v2205的SmartEdit优先推荐使用Angular组件而非静态模板，更符合Angular生态，也能避免路径加载问题。
• 若使用模板路径，必须确保文件能被SmartEdit正确加载，建议放在assets目录下使用绝对路径。
• 可通过调试EditorFieldMappingService.getFieldMapping('Number')方法，确认最终生效的映射是否为自定义配置，排查是否被其他扩展覆盖。

内容的提问来源于stack exchange，提问作者Danny.404