带有打字稿的 $stateprovider 中父亲中的默认孩子 [英] default child inside father in $stateprovider with typescript

问题描述

我有一个 html 页面父亲:

<pp-nav></pp-nav><div ui-view></div>

这是我的控制器，有一个父亲和两个孩子:

导出函数 routerConfig($stateProvider: angular.ui.IStateProvider, $urlRouterProvider: angular.ui.IUrlRouterProvider) {$stateProvider.state('gestionePeP', {url: '/gestionePeP',templateUrl: '.../gestionePeP/gestionePeP.html'}).state('gestionePeP.puntiAttivazione', {url: '/puntiAttivazione',templateUrl: '.../gestionePeP/puntiAttivazione.html'}).state('gestionePeP.gestioneContenuti', {url: '/gestioneContenuti',templateUrl: '.../gestionePeP/gestioneContenuti.html'});

我希望当我转到父页面时，stateprovider 打开父 html 页面，其中包含第一个孩子.我该怎么做?

如果我用

在父亲的按钮内放置一个链接

ui-sref="gestionePeP.puntiAttivazione"

它打开正确的页面.但我想要没有任何点击的相同行为.我试过 $state.go('gestionePeP.puntiAttivazione') 但它进入循环.怎么解决?

解决方案

我找到的最好的方法仍然在这里:

使用 AngularJS 中的 UI-Router 将状态重定向到默认子状态

只需将这些行添加到一些 .run()

app.run(['$rootScope', '$state', function($rootScope, $state) {$rootScope.$on('$stateChangeStart', function(evt, to, params) {如果(to.redirectTo){evt.preventDefault();$state.go(to.redirectTo, params)}});}]);

并使用默认的redirectTo扩展状态定义:

.state('gestionePeP', {url: '/gestionePeP',templateUrl: '.../gestionePeP/gestionePeP.html',//这将设置重定向目标重定向到:'gestionePeP.puntiAttivazione',})

检查该链接以了解工作plunker

EXTEND - 如何让 ng.ui.IState 知道新的属性 redirectTo?

只需将这些行添加到您的代码中:

declare module angular.ui { export interface IState { redirectTo?: string;} }

I have an html page father with:

<div id="..." class="container">
   <pp-nav></pp-nav>
   <div ui-view></div>
</div>

This is my controller with a father and two child:

export function routerConfig($stateProvider: angular.ui.IStateProvider, $urlRouterProvider: angular.ui.IUrlRouterProvider) {
$stateProvider
.state('gestionePeP', {
  url: '/gestionePeP',
  templateUrl: '.../gestionePeP/gestionePeP.html'
})
.state('gestionePeP.puntiAttivazione', {
  url: '/puntiAttivazione',
  templateUrl: '.../gestionePeP/puntiAttivazione.html'
})
.state('gestionePeP.gestioneContenuti', {
  url: '/gestioneContenuti',
  templateUrl: '.../gestionePeP/gestioneContenuti.html'
});

I want that when I go to the father page the stateprovider opens the father html page with the first child inside it. How can I do it?

If I put a link inside a button in the father with

ui-sref="gestionePeP.puntiAttivazione" 

it opens the right page. But I want the same behaviour without any click. I tried $state.go('gestionePeP.puntiAttivazione') but it goes in loop. How can I solve?

解决方案

Still far the best way I found is here:

Redirect a state to default substate with UI-Router in AngularJS

just add these lines to some .run()

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

And extend state def with default redirectTo:

.state('gestionePeP', {
  url: '/gestionePeP',
  templateUrl: '.../gestionePeP/gestionePeP.html',
  // this will set redirect target
  redirectTo: 'gestionePeP.puntiAttivazione',
})

Check that link to se working plunker

EXTEND - how to make ng.ui.IState aware of the new property redirectTo?

Just add these lines to your code:

declare module angular.ui { export interface IState { redirectTo?: string; } }

这篇关于带有打字稿的 $stateprovider 中父亲中的默认孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！