如何在AngularJS中动态添加组件？

Question

请告诉我，如何在控制器中创建组件？

我有 angularjs 个带控制器的模块

let app = angular.module('testApp', []);

我尝试加载组件，但它没有加载。

app.controller('MainCtrl', ["$scope", function($scope) {
  // I have an array with objects.
  let arr = [{name: 'firstComponent', component: {
      template: "<div>tech filter component</div>",
      controller: [() => {
        let $ctrl = this;
      }]
  }}];
  angular.forEach(arr, (itemArr) => {
    // Why it doesn't init from here ?
    app.component(itemArr.name, itemArr.component)
  });
}]);

这是我的 html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>angularjs component</title>
</head>
<body ng-app="testApp" >
<div ng-controller="MainCtrl">
  <first-component></first-component>
</div>
</body>
</html>

jsfiddle link

Answer 1

我真的不建议按照您尝试的方式动态添加组件。基于对象数组生成组件没有任何好处。但是.. 如果你真的想这样做，你应该检查你的组件配置对象并删除控制器声明附近的 [] 。另请注意，并非所有支持 AngularJS.

的浏览器都支持箭头功能

注意：调用angularbootstrap后无法加载组件。

查看

<first-component></first-component>

AngularJS申请

var myApp = angular.module('myApp',[]);

let myStupidComponentArray =  [{
  name: 'firstComponent', 
  component: {
  template: "<div>tech filter component</div>",
  controller: function () {
    let $ctrl = this;
  }
}}];


angular.forEach(myStupidComponentArray, function (item) {
  myApp.component(item.name, item.component);
});

> demo fiddle.

我宁愿不使用循环来创建您的组件。根据定义，您应该使用经典方式来完成。它会给你更多"performance"和更少的代码：

查看

<first-component></first-component>

AngularJS申请

var myApp = angular.module('myApp', []);

myApp.component('firstComponent', {
  template: "<div>tech filter component</div>",
  controller: function() {
    let $ctrl = this;
  }
});

demo fiddle

如何在AngularJS中动态添加组件？

How to dynamically add components in AngularJS?

javascript

components

directive

angularjs

查看

AngularJS申请

查看

AngularJS申请