如何使用 ngRoute 在 templateUrl 中使用 URL 参数？ [复制]答案

【问题标题】：How to use an URL param in a templateUrl using ngRoute? [duplicate]如何使用 ngRoute 在 templateUrl 中使用 URL 参数？ [复制]
【发布时间】：2014-05-23 07:09:07
【问题描述】：

我正在构建一个 angularjs 应用程序，我的 app.js 看起来像这样。但是，它会引发 Unknown provider: $routeParams 错误。知道为什么吗？

var angularSite = angular.module('angularSite', [
  'ui.router',
  'ngRoute',
  'siteController',
  'siteDirectives'
])
.config(['$routeProvider', '$routeParams',
  function($routeProvider,$routeParams) {
    $routeProvider.
      when('/Projects', {
        templateUrl: 'partials/projects.html',
        controller: 'ProjectController'
      }).
      when('/Projects/:projectId', {
        template: 'partials/pages/'+$routeParams.projectId+'.html',
        controller: 'ProjectDetailController'
      }).
      otherwise({
        redirectTo: '/About'
      });
  }]);

【问题讨论】：

$routeParams 是服务而不是提供者，你想在你的配置方法中用它来完成什么？文档：docs.angularjs.org/api/ngRoute/service/$routeParams#!
我找到了这个link，我相信它回答了你的问题。

标签： javascript angularjs url-routing ngroute

【解决方案1】：

$routeParams 是一个服务，可以不注入.config。

如果你想从 URL 参数中设置你的 templateUrl，正确的方法是使用一个函数来设置templateUrl（如下）：

.when('/Projects/:projectId', {
    templateUrl: function(params) { // <-- 
        return 'partials/pages/' + params.projectId + '.html'    
    },
    controller: 'ProjectDetailController'
})

【讨论】：

【解决方案2】：

在 AngularJS 1.2 中可用配置级别替换访问路由参数。

template: 'partials/pages/'+$routeParams.projectId+'.html',

与：

templateUrl: function(params){ return 'partials/pages/' + params.projectId + 'html'; }

来源 - AngularJS - How to use $routeParams in generating the templateUrl?

【讨论】：

【解决方案3】：

在 Angular 模块的配置中不允许使用服务。 $routeParams 是一项服务，因此您不能在那里使用它。

我建议您通过控制器 ProjectDetailController 包含一个或另一个模板。在这个控制器中，您可以注入和使用服务 $routeParams，以便选择一个或另一个模板。比如：

所以，你的配置：

 when('/Projects/:projectId', {
    template: 'partials/pages/main.html',
    controller: 'ProjectDetailController'
  }).

你的控制器：

Controller.$inject = ['$routeParams'];

/* @ngInject */
function Controller($routeParams) {
  var vm = this;
  vm.template = 'partials/pages/'+$routeParams.projectId+'.html';
}

还有你的 main.html 模板：

<ng-include src="vm.template"/>

【讨论】：