Question

我需要加入一个Angular项目并且几乎没有经验，有人可以帮助我如何向app.routes.js添加参数吗？

我有这个例子：

.state('product-article', {
            resolve: {
                productArticleData: getProductArticleData
            },
            url: '/product-article',
            templateUrl: siteInfo.templateRoot + '/productArticlePage.html',
            controller: 'ProductArticlePageController',
            controllerAs: 'ProductArticlePageCtrl'
        })

在同一个文件中我可以找到：

function getProductArticleData(ProductArticleApiService) {
    return ProductArticleApiService.getData();
}

在ProductArticleApiService.js中我发现了这个：

angular.module('ourApp').factory('ProductArticleApiService', ['apiBase','$http', ProductArticleApiService]);

function ProductArticleApiService(apiBase, $http) {
    return {
        getData: function() {
            return $http({
                method: 'GET',
                url: apiBase + '/product_article/98',
                headers: {
                    'X-Siteaccess': 'eng'
                }
            });
        }
    };
};

现在我的任务是使其更加动态，从最后一个文件替换硬编码的“98”和“eng”，所以我将这些参数添加到getData（）函数中，并将它们添加到getProductArticleData函数中：

function getProductArticleData(ProductArticleApiService, article_id, siteaccess) {
    return ProductArticleApiService.getData(article_id, siteaccess);
}

但是当我尝试在app.routes.js中执行此操作时出现问题：

resolve: {
                productArticleData: getProductArticleData("98","eng")
            },

（我知道，仍然没有动态，但我认为这是要走的路）这是崩溃我的应用程序。这是有道理的，因为我只给了一个需要3的函数的2个参数。但是，在我完成所有这些更改之前，它是有效的。应用程序如何与原始代码一起工作？在解决方案中：部分我没有将ProductArticleApiService作为参数提供给getProductArticleData函数，但是它可以正常工作，但是当我添加额外的参数时却没有？

Answer 1

以上问题（为什么它没有按预期工作）getProductArticleData 不是实际上被视为正常功能。它的行为更像是在控制器中看到的函数，其中指定的参数实际上将由angular注入：

angular.module("ourApp").controller(function ($scope, Service1, Service2) {
    // some code
});

因此，在您的示例中，ProductArticleApiService是一个角色服务，它将被注入并且您的应用可能已损坏，因为angular现在正尝试将article_id和siteaccess作为服务注入。由于（我假设）没有这样的服务，它失败了。

我怀疑您尝试做的是将$http请求的参数指定为在服务外部指定。所以这可能是你正在寻找的东西：

.state('product-article', {
        resolve: {
            // I moved the function here for clarity
            // added $stateParams to be injected
            productArticleData: function (ProductArticleApiService, $stateParams) {
                return ProductArticleApiService.getData($stateParams.articleId, $stateParams.siteaccess);
            }
        },
        // changed url
        url: '/product-article/:articleId/:siteaccess',
        templateUrl: siteInfo.templateRoot + '/productArticlePage.html',
        controller: 'ProductArticlePageController',
        controllerAs: 'ProductArticlePageCtrl'
    })

这里需要注意几点：

我更改了网址以接受两个参数:articleId和siteaccess，现在可以将其称为/product-article/98/en
我将功能更改为接受ProductArticleApiService和$sateParams。 $stateParams是＆＃34;服务＆＃34;它提供了上面的url参数。

我强烈建议您深入了解角度路由的工作方式，特别是ngRoute和ui-router（它们相关但不同+您在代码中使用ui-router）。

希望这应该足以让你入门。评论澄清任何事情。

在Angular app.routes.js中使用参数解析函数

1 个答案: