javascript - AngularJS 将子状态参数插入 $urlRouterProvider (UI-Router)

Question

我正在尝试使用 $urlRouterProvider 将我从父状态重定向到子状态，尽 pipe 状态是接受参数的 URL。 (子网址:/:page?pageId)。

我只是希望通过从 www.example.com/home 输入来进入应用程序，然后 $urlRouterProvider 应接管路由。

代码看起来像这样:

$urlRouterProvider.when('/home', '/home/?pageId=1');
$stateProvider.state('home', {
    url: '/home',
    abstract: true,
    templateUrl: 'home.tpl.html'
}).state('home.page', {
    url: '/:page?pageId',
    templateUrl: '...'
});

如您所见，我希望通过使用 $urlRouterProvider 我能够从 /home (父状态)定向位置 通过强制 url /?pageId=1 到参数化子状态 /:page?pageId。相反，它只是在 /home/ 后面附加一个斜杠。

这里有一个关于这种疯狂的非常不正常的 plnkr:http://plnkr.co/edit/XZ4jkhqzQmykIgx0CvH2?p=preview

谢谢!

Answer 1

有a working plunker

我不确定为什么上述符号不起作用(如果打算跳过它或不)，但通过此调整它将起作用:

$stateProvider.state('home', { 
    url: '/home',
    abstract: true, 
    templateUrl: 'home.html',
    controller: 'controller',
}).state('home.child', {
    url: '/:page?pageId',
    templateUrl: 'childtemplate.html',
    params : {                 // HERE we do define the defaults
      pageId: {value: 1},      // these would serve as a starting value
    }
});

因此，我们在这里有效做的是在 url 之外声明默认值，但在 params: {} 设置中:

...
params : {
    pageId: {value: 1},
}

检查一下here