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的浏览器都不支持箭头功能。

注意：在调用角度引导程序后无法加载组件。

视图

<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);
});

<强>＆GT; demo fiddle

我宁愿不使用循环来创建组件。您应该按照定义使用经典方法来完成。它会为您提供更多“性能”和更少的代码：

视图

<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中动态添加组件？

1 个答案:

视图

AngularJS应用程序

视图

AngularJS应用程序