Question

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

修改：组件具有模板，ui-router也是如此。我对这两个概念的阐述感到困惑。

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

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

所以组件似乎正在消除一些用于属于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：

＆＃34;在基于组件的应用程序中，每个视图都是一个组件＆＃34;

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

＆＃34;组件模型通过使用隔离范围强制分离关注点和封装。无法再直接访问父作用域中的数据。相反，它需要在＆＃34;

中明确连接

Answer 1

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

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

这里有working example个使用相同控制器的多个状态和模板。

修改：您不必使用components。为什么要创建三个不同的额外组件，而没有它们可以实现相同的功能？我仍然会推荐上面提到的方法。应始终选择使用较小代码获得相同结果。：）

在Twitter上引用Eric Elliot，

代码是暂时的。它存在虽然有用。如果代码被更好的代码替换，那就好！如果可以删除代码，请庆祝！

Answer 2

您的州提供商将如下所示

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>

参考multiple views

Answer 3

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。 Haven没有测试它是否有效，但它是可能工作方式的基本概念。

主要的是你拥有route1组件，它只处理链接路径的东西（比如url，resolve等）并将这些信息传递给它的孩子（其中没有任何东西））。

routeView1只是呈现路由的工作方式，并使用require与共享的某个父API进行通信（如果需要，也可以使用单向绑定，但有很多这导致了一个混乱的模板）。

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

，但这可能是相当多的重复。你可以使用一些翻译魔法来解决这个问题，但它并不值得。

我会真的建议不要像其他回答者建议的那样共享控制器。在Angular 2及更高版本中，控制器是组件。你可以通过做类似于我所做的事情（或通过使用带有回调的单向绑定）和使用合成来分享行为。
正如我在回答中所提到的，用于Angular 1.5的新版UI-Router允许您指定要呈现的组件而不是模板。有关详细信息，请参阅here。

使用角度组件和ui-router，单个控制器可以有多个模板吗？

3 个答案: