返回动态标题的$stateParams

Return $stateParams for dynamic title

本文关键字：stateParams 标题 动态 返回      更新时间：2023-09-26

我可以在点击"计数"页面的链接时传递路由器参数

$state.go('count', {targetName: object.name})

因为在路由器中建立了如下所示的内容：

url: '/count/:targetName',

我们使用UI路由器中的data:选项与$state组合来动态设置我们的页面标题

<title ng-bind="'Application Name : ' + $state.current.data.pageTitle"></title>

我希望pageTitle包括:targetName。因此，为了做到这一点，我认为我需要在路由器的data:属性中设置一个函数。我试过这样的东西：

data: {
    pageTitle: function () {
        getTargetName.$inject('$stateParams');
        function getTargetName ($stateParams) {
            return $stateParams.targetName;
        }
    }
}

这根本不允许解析页面。

有什么建议吗？

有一个工作的plunker

让我们有这样的状态

// this is just a state, with its own pageTitle STRING
.state('home', {
    ...
    data: {
       pageTitle: "Just a home page"
    },
})
// this is a parent state, with URL parameter 'someParam'
// nad pageTitle as a function
.state('parent', {
    ...
    url: "/parent?someParam",
    data: {
        pageTitle: function ($stateParams) {
          return `title with a param ${$stateParams.someParam}`;
        }
    }
})
// and to show that child can change it
.state('parent.child', { 
    ...
    data: {
        pageTitle: "just a child title",
    }
})

使这行代码工作：

<title>The tile is: {{ getTitle() }}  </title>

我们可以在$rootScope中添加一些小的评估，但当然，它应该是一些服务将其视为简化的方法：

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.getTitle = function(){
      var state = $state.current;
      var params = $stateParams;
      if (state.data
      && state.data.pageTitle) {
        if(typeof (state.data.pageTitle) === "function" ){
          return state.data.pageTitle(params);
        }
        return state.data.pageTitle
      }
      return "no title for this state"
    }
}])

所有这些链接都将有不同的标题

<a href="#/home">
<a ui-sref="parent({someParam: 1})">
<a ui-sref="parent({someParam: 'someValue'})">
<a ui-sref="parent.child">

点击此处查看操作

相关文章：