AngularJs：将 stateParams 值附加到状态对象中的自定义数据

【问题标题】：AngularJs : Attach a stateParams value to custom data in state objectsAngularJs：将 stateParams 值附加到状态对象中的自定义数据
【发布时间】：2023-03-14 10:45:01
【问题描述】：

我正在按照 here 的建议在状态对象中定义页面标题。

$stateProvider
  .state('project', {
    url: '/projects/:origin/:owner/:name',
    template: '',
    data : { pageTitle: 'Project page title'},
  });

所以我以后可以通过这种方式访问它：

$state.current.data.pageTitle

现在...我想做的是，与其将 pageTitle 设为固定值，不如访问 stateParams 之一。

注意，下面的例子不工作，这是我希望它工作的方式。

$stateProvider
  .state('project', {
    url: '/projects/:origin/:owner/:name',
    template: '',
    data : { pageTitle: $stateParams.name},
  });

我也可以使用 resolve 属性：

resolve: { title: '项目页面标题' },

对于 stateParams 值，我可以这样做：

resolve:{
    pageTitle: ['$stateParams', function($stateParams){
      return $stateParams.name;
    }]
}

然后是 console.log($state.current.resolve.pageTitle);在我的控制器中将返回整个函数而不是结果。

这样做的正确方法是什么？

更新：

我没有提到的是我在 ES6 中使用了 angularJs，并且我使用了模块化架构。因此，每个组件都有自己的范围。

您可以查看我之前的 post ，以更好地了解我正在使用的模块化架构。

我正在构建一个获取父状态的面包屑（使用定义的 pageTitle）。因此在每个模块中定义页面标题名称将是完美的。

所以我可以决定页面标题是固定值“我的页面标题”还是 stateParams 值。

也许这是完全错误的，不应该那样做。如果是这样，请告诉我。

您可能需要调用该函数吗？像 console.log($state.current.resolve.pageTitle());
不，这不起作用:( .

【解决方案1】：

如果您使用类似示例的解析：

resolve:{
    pageTitle: ['$stateParams', function($stateParams){
        return $stateParams.name;
    }]
}

您需要将 pageTitle 注入您的控制器：

angular.module('app').controller('controller', [
             'pageTitle',
    function (pageTitle) {

    }
]);

但我看不出这与注入 $stateParams 有何不同：

angular.module('app').controller('controller', [
             '$stateParams',
    function ($stateParams) {

    }
]);

【讨论】：

我没有提到的是我在 ES6 中使用了 angularJs，并且我使用了模块化架构。因此，每个组件都有自己的范围。我正在构建一个获取父状态的面包屑（使用定义的 pageTitle）。因此，我想避免在我的面包屑组件中使用这种逻辑。在每个模块中定义页面标题名称将是完美的。
我明白你的意思，我想你是对的。我检查了另一个帖子，这似乎正是我需要做的。我还不能让它与 ES6 一起工作，但至少这是一个很好的提示。 stackoverflow.com/questions/21970406/…

分享于2023年03月15日 angular-ui-router angularjs javascript 问答