在Umbraco 13中创建带BlockGrid属性的自定义组件求助

核心解决思路 #

Umbraco 13后台的BlockGrid编辑器核心依赖umb-block-grid指令，只要在自定义组件视图中正确绑定数据并引入对应依赖，就能实现嵌套BlockGrid属性的渲染。

具体实现步骤 #

1. 视图中直接使用umb-block-grid指令
   在自定义BlockGrid组件的AngularJS视图里，直接调用指令并绑定嵌套属性的数据：

   <div ng-controller="CustomBlockGridComponentController" ng-init="init(model)">
       <!-- 渲染组件的其他属性 -->
       <div class="mb-3">
           <h4>组件标题：{{model.value.title}}</h4>
       </div>
       
       <!-- 渲染嵌套的BlockGrid属性 -->
       <div class="nested-block-grid">
           <h5>嵌套内容区块</h5>
           <umb-block-grid 
               model="model.value.nestedBlockGridAlias" 
               view="default"
               allow-empty="true"
           ></umb-block-grid>
       </div>
   </div>
   

   注意替换nestedBlockGridAlias为你实际定义的BlockGrid类型属性别名。

2. 控制器预处理数据（可选）
   为避免嵌套属性为空时出现报错，可在对应的AngularJS控制器中初始化空数据结构：

   angular.module("umbraco").controller("CustomBlockGridComponentController", function($scope) {
       $scope.init = function(model) {
           $scope.model = model;
           // 初始化空的BlockGrid结构
           if (!$scope.model.value.nestedBlockGridAlias) {
               $scope.model.value.nestedBlockGridAlias = {
                   layout: [],
                   blocks: []
               };
           }
       };
   });
   

3. 包清单声明依赖
   在自定义组件的package.manifest中，必须声明对umbBlockGrid的依赖，确保指令能正常加载：

   {
       "propertyEditors": [
           {
               "alias": "Custom.BlockGridComponent",
               "name": "自定义嵌套BlockGrid组件",
               "view": "/App_Plugins/CustomComponents/block-view.html",
               "icon": "icon-layout",
               "group": "自定义组件",
               "dependencies": ["umbBlockGrid"]
           }
       ]
   }
   

替代方案：通用属性渲染指令 #

如果不想手动处理BlockGrid的渲染逻辑，可使用Umbraco内置的umb-property指令，自动渲染整个属性的编辑器：

<umb-property 
    property="model.properties.nestedBlockGridAlias"
    label="嵌套内容区块"
    description="此处可添加嵌套的BlockGrid内容"
></umb-property>

这种方式会直接复用Umbraco原生的BlockGrid编辑器界面，无需额外处理数据绑定。

内容的提问来源于stack exchange，提问作者riofly