Question

问题

我试图建立一个相当复杂的角度组件，我不确定最好的方法。

如果我必须将我的组件描述为函数，则主要参数为：

生成元素列表
用于呈现这些元素的模板（如果它是A类的元素，则使用模板A等）
可以应用于列表元素的可能操作的列表（带有一些用于解释它们的附加数据，如文本和图标来构建按钮）。

所以为了给你一个例子我可能想要创建一个包含这些参数的列表：

检索10个用户的功能
＆＃34;用户＆＃34;的模板元件
操作列表[{action：deleteUser，icon：deleteIconPath，text：＆＃39; delete＆＃39;}]

我不确定这是否是最佳方法，但该组件应该能够自行处理元素列表，而不应该通过其容器接收它。

可能的解决方案

1

第一个明显的解决方案是让容器管理元素列表（第一个参数）并转换元素模板和操作。

<my-list>
    <elements>
        <div ng-repeat="elem in $ctrl.getData()>
            <element>
                <user e="elem"> </user>
            </element>
            <actions>
                <button action="$ctrl.delete(elem)>delete</button>
            </actions>
    <elements>
</my-list>

2

一个完全不同的解决方案是将所有内容作为组件的属性传递

<my-list> 
    data-getter="$ctrl.getData" 
    template="user"
    actions="[{action: deleteUser, icon: deleteIconPath, text: 'delete'}]"
</my-list>

1 vs 2比较

解决方案1似乎是非常标准的角度，但在我的情况下，它将意味着很多冗长和重复的代码，我不喜欢它太多。解决方案2似乎完全没有标准，我担心这可能会导致一些我现在无法预见的问题。

看起来像＆＃34;趋势＆＃34;灵感来自于灵感，是让一些顶级组件管理所有数据，让子组件通过单向数据绑定访问适当的数据。当然，仅仅因为这种建筑风格很受欢迎并不意味着它适合我，但我不想反对这个框架。

问题

所以主要问题是：

可能是一个子组件自己获取数据（当然是通过服务）？
是我描述的第二个解决方案＆＃34;错误＆＃34;以某种我现在无法发现的基本方式？
是否有一种方法让案例1让被转换的代码访问组件元素（我的意思是在组件内移动ng-repeat并让转换的代码访问对ng-repeat范围的引用）？
你有什么其他建议可以建造这个东西吗？

在构建复杂的角度组件时，我应该使用属性还是翻译？

0 个答案: