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

Posted 2023-02-23

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

【英文标题】：How can I achieve component composition in AngularJS (similar to React render props pattern)?

【发布时间】：2019-05-26 08:18:24

【问题描述】：

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

我正在尝试使用“新”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> 应该负责每个单独项目的付款方式。

【参考方案1】：

经过研究，我发现了两种方法可以做到这一点。其中之一是 require 子组件中的父控制器并使用它的数据，或者通过使用链接函数和编译（这不适用于组件 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);
      );
    

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

【参考方案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>