如何在AngularJS组件/指令中动态渲染传入的子组件？

在AngularJS里要实现这种能动态渲染子组件的包装器，核心得用到$compile服务——毕竟AngularJS没有Angular那样的ngComponentOutlet语法，得手动编译组件模板。我给你一步步拆解实现方式：

1. 定义包装器组件的基础结构 #

先创建一个带隔离作用域的组件，绑定需要的参数：标题（header）、子组件名称（componentName），还有可选的子组件属性（componentProps）。模板里留好标题区域和动态组件的容器：

angular.module('yourApp').component('componentWrapper', {
  bindings: {
    header: '@', // 字符串类型的标题
    componentName: '@', // 子组件的名称（比如"user-profile"）
    componentProps: '<' // 子组件需要的属性，对象类型
  },
  template: `
    <div class="wrapper">
      <h1>{{$ctrl.header}}</h1>
      <!-- 动态组件的容器 -->
      <div class="dynamic-component-container"></div>
    </div>
  `,
  controller: ['$compile', '$element', '$scope', function($compile, $element, $scope) {
    const ctrl = this;
    const container = $element.find('.dynamic-component-container');

    // 监听子组件名称或属性变化，自动重新渲染
    $scope.$watchGroup(['$ctrl.componentName', '$ctrl.componentProps'], () => {
      if (!ctrl.componentName) return;

      // 先清空容器，避免重复渲染旧组件
      container.empty();

      // 构建子组件的HTML字符串，绑定传入的属性
      let componentHtml = `<${ctrl.componentName}`;
      if (ctrl.componentProps) {
        Object.keys(ctrl.componentProps).forEach(prop => {
          componentHtml += ` ${prop}="$ctrl.componentProps.${prop}"`;
        });
      }
      componentHtml += '></${ctrl.componentName}>';

      // 编译HTML并链接到作用域（这里用父作用域，也可以根据需求用新的子作用域）
      const compiledComponent = $compile(componentHtml)($scope.$parent);
      container.append(compiledComponent);
    });

    // 在这里定义包装器的通用函数，比如：
    ctrl.commonWrapperFunction = function() {
      console.log('这是包装器自带的通用函数');
      // 如果需要让子组件调用，可以把函数通过componentProps传递进去
      // 比如 ctrl.componentProps.onWrapperAction = ctrl.commonWrapperFunction;
    };
  }]
});

2. 实际使用包装器组件 #

在父模板里，你只需要传递标题、子组件名称和对应的属性就能自动渲染子组件了：

<!-- 示例1：渲染用户信息组件 -->
<component-wrapper
  header="用户信息"
  component-name="user-profile"
  component-props="{userId: 123, userName: '张三'}">
</component-wrapper>

<!-- 示例2：渲染商品列表组件 -->
<component-wrapper
  header="电子产品列表"
  component-name="product-list"
  component-props="{category: 'electronics', pageSize: 10}">
</component-wrapper>

3. 关键注意事项 #

• 作用域处理：上面例子用了$scope.$parent编译子组件，如果你希望子组件和包装器完全隔离，可以用$scope.$new()创建新的子作用域，避免作用域污染。
• 内存泄漏防范：在组件销毁时记得清理容器和监听事件，添加$onDestroy钩子：

  ctrl.$onDestroy = function() {
    container.empty();
    // 自定义的监听事件也在这里销毁
  };
  

• 属性绑定匹配：确保componentProps里的属性名称和子组件的绑定名称完全一致，不然子组件接收不到正确的数据。
• 通用函数传递：如果包装器的通用函数需要被子组件调用，直接把函数作为componentProps的一个属性传入即可，子组件通过绑定接收后就能调用。

这样你的包装器就能自动根据传入的组件名称渲染对应内容，同时保留统一的HTML结构和通用函数啦！

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