如何使用ui路由器的组件API进行ng-transclude

Question

我正在使用UI路由器运行AngularJS。当我遇到某条路线时，我想渲染一个组件。

我还希望能够通过ngTransclude将子组件传递给组件。

如果我要在模板中执行此操作，我会执行以下操作：

       

但是现在，UI路由器建议我使用[component api]。1

是否有人知道是否可以使用ui路由器的组件API定义ngTransclude选项？或者我必须使用模板吗？

以下是我现在所拥有的：

.state('builder.items.selectedItem', {
      views: {
        'myViews@builder': {
          component: 'first-component', //this is the new API
        },
      },
      resolve: {
        item: /*@ngInject*/ function(dataService) {
          return dataService.getItems()[0];
        },
      },

我的组件定义是

const component = {
  ngTransclude: true,
  bindings: {
    item: '<',
  },
  controller: Blahblah,
  template: `<div>
    Hello i am inside first component and my item is {{item}}
    <ng-transclude>
    </ng-transclude>
  </div`
}