如何在 AngularJS 中实现组件组合（类似于 React 渲染道具模式）？

Question

我正在尝试在 AngularJS 中创建一个网格组件，它在运行时提供网格项。（想想 React 中的渲染道具模式）。

我正在尝试使用 "new" AngularJS 组件 API 以及嵌入来构建它。

<grid-items>
   <grid-item-type-1></grid-item-type-1>
</grid-items>


<grid-items>
   <grid-item-type-2></grid-item-type-2>
</grid-items>

这些都应该是有效的。 <grid-items> 应该处理数据，<grod-item-type-x> 应该处理每件商品的付款方式。

Answer 1

经过研究，我发现了两种方法。其中之一是 require 子组件中的父控制器并使用它的数据，或者通过使用 link 函数和编译（这不适用于组件 API），像这样：

link: function(scope, element) {
      scope.items.forEach((item) => {
        const tpl = "<" + item.type + " item=" + item + " ></grid-item>"
        const child = $compile(tpl)(item)
        element.append(child);
      });
    }

上述方法不使用嵌入，但您仍然可以使用在运行时提供给父级的任何子组件。

Answer 2

好吧，如果我没看错的话，有一些方法可以做到这一点。定义组件时，像这样：

{
  restrict: 'E',
  bindings: {
    myProp: '@',
  },
  transclude: {
    'myTransclude': 'myTransclude',
  },
  template,
  controller,
  controllerAs: 'ctrl',
}

您传递给 bindings 的任何内容都可以从您的组件访问。所以在上面的例子中，如果你做了这样的事情：<my-component my-prop="hey" /> 你也可以访问 ctrl.myProp 并得到你的 hey 值。

在更复杂的方式中，您可以使用嵌入项，在您的 myComponent 模板中，您将拥有如下内容：

  <div ng-transclude="myTransclude"></div>

每次你使用它时都会像这样：

<my-component>
    <my-transclude>
        <!-- whatever you wan to go inside your component  -->
    </my-transclude>
</my-component>

当然，您可以有一个 HTML 编译指令（我建议搜索现有的指令），您可以在其中拥有您的模板并直接使用它

    <div html-compile-directive="ctrl.myTemplate"></div>

如何在 AngularJS 中实现组件组合（类似于 React 渲染道具模式）？

How can I achieve component composition in AngularJS (similar to React render props pattern)?

javascript

components

angularjs

reactjs

angularjs-ng-transclude