Angular 1 中如何将动态组件传递给容器组件

Question

有没有办法将运行时定义的组件传递到 Angular 1 中另一个组件的内部渲染？这是 React 库的一种相当常见的模式，但我无法弄清楚它在 Angular.

中是如何工作的

这是一个 React 示例：

  const List = ({items, ListItem=DefaultListItem}) => {
    return (
      <ul>
        {items.map((item) => (
          <ListItem key={item.id} item={item}/>
        ))}
      </ul>
    );
  }

  // Then later on, you'd define a custom list item:
  <List items={items} ListItem={CustomListItem}/>

我知道在 Angular 1 中使用 ng-transclude 和 ng-include 定义动态子项的一些方法。但是这些方法在迭代数组的上下文中不起作用，每次迭代渲染一个自定义组件。你如何用 Angular 实现这一目标？

Answer 1

这个问题的解决方案是使用 ngRepeat 指令。这是一个例子：

<ul ng-repeat="obj in collection track by $id(obj)">
    <li>{{obj.prop}}</li>
</ul>

Angular 1 中如何将动态组件传递给容器组件

How to pass dynamic components to a container component in Angular 1

angularjs

angularjs-directive

angular-components