0

在一个组件中，我想将模板与 CRUD 操作相关联，但使用一个控制器来处理所有这些操作的数据。这对角度组件有意义吗，还是我应该使用多个组件？ui-router 状态配置如何？

编辑：组件也有模板和 ui-router 状态。我对这两个概念的表达感到困惑。

编辑2：试图澄清我到目前为止的理解：

  • 组件是控制器 + 模板 + 绑定。控制器可以省略。
  • 状态是 url + 模板 + 控制器或 url + 组件。控制器可以省略。

因此，组件似乎正在剥夺一些曾经属于 ui-router 的责任。

我在这里的目标：

 - url1 --> controller foo + template x;
 - url2 --> controller foo + template y;
 - url3 --> controller foo + template z;

我应该这样做：

成分：

component x --> controller foo + template x;
component y --> controller foo + template y;
component z --> controller foo + template z;

然后路由：

url 1 --> component x
url 2 --> component y
url 3 --> component z

?

编辑 3： 引用https://docs.angularjs.org/guide/component：

“在基于组件的应用程序中，每个视图都是一个组件”

引用https://ui-router.github.io/guide/ng1/route-to-component：

“组件模型通过使用隔离范围来强制分离关注点和封装。不能再直接访问来自父范围的数据。相反，它需要显式连接”

4

3 回答 3

2

对的，这是可能的。您的ui-router配置看起来像这样：（多个states 具有相同的控制器。）

.state('add', {
    url: '/add',
    templateUrl: 'templates/add.html',
    controller: 'contactCtrl'
})
.state('edit', {
    url: '/edit',
    templateUrl: 'templates/edit.html',
    controller: 'contactCtrl'
})

这是一个使用同一个控制器具有多个状态和模板的工作示例。

编辑：您不必使用components. 为什么要创建三个不同的额外组件，而无需它们也能实现相同的目标？我仍然会推荐我上面提到的方法。应始终选择使用更少的代码获得相同的结果。:)

在推特上引用Eric Elliot的话，

代码是临时的。它在有用的时候就存在。如果代码被更好的代码代替，很好！如果代码可以删除，庆祝！

于 2017-03-29T08:43:58.190 回答
0 
angular.module('', [])
  // Route handler touches this
  .component('route1', {
    template: `<shared-behaviour>
      <route-view-1></route-view-1>
    </shared-behaviour>`
  })
  // This is a purely visual component that links actions with the shared behaviour component
  .component('routeView1', {
    require: {
      shared: '^sharedBehaviour'
    },
    template: '<button ng-click="$ctrl.onClick()></button>',
    controller: class RouteView2Ctrl {
      onClick() {
        this.shared.onSharedClick()
      }
    }
  })
  // Contains the shared behaviour that is shared across the multiple routes
  .component('sharedBehaviour', {
    // Tell Angular to render children passed to this component
    transclude: true,
    template: '<div ng-transclude></div>',
    controller: class SharedBehaviourCtrl {
      onSharedClick() {
        /// do something
      }
    }
  })
  // Newest version of UI-Router
  .state('route1', {
    component: 'route1'
  })

根据我们的评论，您可以使用类似上述的内容。这很冗长，但那是 Angular 1.5。尚未测试它是否有效，但这是它如何工作的基本概念。

主要的收获是您拥有route1仅处理链接路由内容（如 url、resolves 等）并将该信息传递给其子级（没有任何子级）的组件。

routeView1只是渲染路由的工作方式，并用于require与某些共享的父 API 对话（如果需要，您也可以为此使用单向绑定，但是使用很多方法会导致模板混乱）。

sharedBehaviour仅包含您想要呈现传递给它的任何子项的共享行为。

诚然，这很混乱，我希望您改为使用单向绑定route-view-1并处理 in 的链接shared-behaviour，但这可能是相当多的重复。你可以使用一些嵌入魔法来解决这个问题，但它......并不值得。

我真的建议不要像其他回答者建议的那样共享控制器。在 Angular 2 及更高版本中，控制器是组件。您可以通过执行与我所做的类似的事情（或通过使用带有回调的单向绑定）和使用组合来共享行为。

顺便说一句，正如我在回答中提到的，新版本的 UI-Router for Angular 1.5 允许您指定要呈现的组件而不是模板。请参阅此处了解更多信息。

于 2017-03-29T14:03:57.680 回答
0

您的状态提供者将如下所示

JS代码

        $stateProvider
      .state('report', {
        views: {
          'filters': {
            templateUrl: 'report-filters.html',
            controller: 'ctrl'
          },
          'tabledata': {
            templateUrl: 'report-table.html',
            controller: 'ctrl'
          },
          'graph': {
            templateUrl: 'report-graph.html',
            controller: 'ctrl'
          }
        }
      })

在单一状态下，您可以加载多个视图

HTML

  <body>
    <div ui-view="filters"></div>
    <div ui-view="tabledata"></div>
    <div ui-view="graph"></div>
  </body>

参考多个视图

于 2017-03-29T08:45:25.103 回答