javascript - Angular UI 路由器 - 抽象状态的子级不继承 $stateChangeStart 中的数据

Question

根据这个问题的最佳答案...

Acess parameters of parent state from child state in stateChangeStart

当您将 toState 注入(inject) $stateChageStart 时，它应该继承/合并来自父状态的数据。

不幸的是，这在我的应用程序中不起作用，其中父级是抽象状态。这是我的路线

// Settings
    .state('wfSettings', {
        url: '/settings',
        abstract: true,
        template: '<ui-view/>',
        data:{
            customData1:  "Hello",
            customData2:  "World!"
        }
    })


    .state('wfSettings.siteSettings', {
        url: "/site-settings",
        templateUrl: "/templates/siteSettings.tpl.html",
        controller: "SiteSettingsCtrl as siteSettings",
        data:{
            customData2:  "UI-Router!"
        }
    })

当我在 $atateChangeStart 函数中使用 console.log(toState) 并访问子页面时，它会输出此内容。

因此您可以看到来自父级的数据不存在。

唯一奇怪的是，在上面的屏幕截图中，您可以看到 Chrome 开发工具将“V”放在数据旁边，而不是通常的“对象”(如果我不在父级上放置任何数据)状态。非常奇怪的行为。

编辑:

我已经取得了一些进展。 ui-router 0.2.11 和 0.2.18 版本之间似乎存在差异。此屏幕截图显示了两行输出。第一个是0.2.11版本计算的$stateChageStart中子路由的数据。

当我将库切换到 0.2.18 时，它会输出第二行!

编辑2:

我已追踪到此更改(在更改日志中未将其归类为重大更改)

https://github.com/angular-ui/ui-router/commit/c4fec8c7998113902af4152d716c42dada6eb465

所以，我知道是什么原因造成的，但我仍然不知道如何解决这个问题。想必我需要以某种方式沿着原型(prototype)链向上并手动合并这些值？但这有点超出了我对 javascript 原型(prototype)继承的了解。

Answer 1

这是由于 0.2.16 中的重大更改所致。这些属性仍然可以由子状态访问，但需要直接访问。

In 0.2.15 and prior, properties from the parent state’s data object were copied to the child state’s data object when the state was registered. If the parent state’s data object changed at runtime, the children didn’t relect the change.

In 0.2.16+, we switched to prototypal inheritance. Changes to the parent data object are reflected in the child.

来源:https://ui-router.github.io/guide/ng1/migrate-to-1_0#prototypal-inherited-data

但是，没有提到的是，即使前面的示例仍然有效(customData1 在子状态中可用)，如果您枚举 $state.current.data.property - 例如，继承的属性将不会出现在“json” Angular 过滤器不会显示继承的属性。看看这个 plunkr 看看这两个效果:https://plnkr.co/edit/8ufkoluh1z6qmZT7VySd?p=preview

来源:产生上述结果的实验​​

如果您想要恢复旧的行为，您也可以实现此目的:

The ship has sailed on the decision between copying vs prototypal inheritance. Switching to deep copy would be a breaking change for many apps which expect a child state's data property to clobber a parent state's data property.

If you want non-standard (deep copy) behavior you can certainly implement it for your app:

 $stateProvider.decorator('data', function(state, parentDecoratorFn){
     var parentData = state.parent && state.parent.data || {};
     var selfData = state.self.data || {};
     return state.self.data = angular.merge({}, parentData, selfData);
 });

example: http://plnkr.co/edit/Wm9p13QRkxCjRKOwVvbQ?p=preview

来源:https://github.com/angular-ui/ui-router/issues/3045#issuecomment-249991317