angularJS中组件内的组件

Question

我有两个独立的组件，在HTML中用另一个组件定义。但我的第二个（内部）组件不使用内部组件的templateUrl属性中提到的模板填充。

//first component
angular.module('app').component('toolCtrl', {
  templateUrl: '/NFRManagementTools/static/js/templates/toolCtrl.html',
  controller: ToolCtrl,
  controllerAs: 'vtc',
});

//second coponent

angular.module('app').component('itemsView', {
  templateURL: '/NFRManagementTools/static/js/templates/itemsView.html',
  controller: ItemsViewCtrl

});

<tool-ctrl>
  <items-view></items-view>
<tool-ctrl>

Answer 1

您可能正在寻找transclude选项，在您的父组件控制器中添加以下选项

angular.module('app').component('toolCtrl', {
  transclude: true,
  templateUrl: '/NFRManagementTools/static/js/templates/toolCtrl.html',
  controller: ToolCtrl,
  controllerAs: 'vtc',
});

在父组件模板中，您应该通过放置特定标签<ng-transclude></ng-transclude>来指定放置内脏的位置

查看official文档，如果父组件下有多个特定元素，这里是similar problem。