私のチームと私が取り組んでいるアプリケーションでは、一貫性のない動作が観察されています。ユーザーがブラウザのリフレッシュを実行すると、リフレッシュボタンはUI状態を含むページを完全にリフレッシュしますが、特定のルートまでしかリフレッシュしません。AngularJS ui-routerが手動リフレッシュで一貫して動作しません
私たちのアプリケーションは、アプリケーション全体とコンポーネント階層を設定する/Homeルートから始まります。ユーザーはA.A、A.B、A.Cに進み、すべて正常に機能します。 B.Aも問題なく動作します。
次に、トラブル。 B.BまたはB.Cからブラウザを更新すると、B.Aに戻ります。これらのページから最新のものに更新された場合、エンドユーザーはB.BまたはB.Cに返されることが予想されます。
Routes.ts
$stateProvider
.state('Home',
{
url: '/Home',
templateUrl: 'App/Home/home.html',
controller: 'homeCtrl',
controllerAs: '$ctrl'
})
.state('A',
{
url: '/A',
templateUrl: 'app/A/A.html',
controller: 'aCtrl',
controllerAs: '$ctrl'
})
.state('A.A',
{
url: '/A.A',
component: 'aPartA'
})
.state('A.B',
{
url: '/A.B',
component: 'aPartB'
})
.state('A.C',
{
url: '/A.C',
component: 'aPartC'
})
.state('B',
{
url: '/B',
component: 'b'
})
.state('B.A',
{
url: '/B.A',
component: 'bPartA'
})
// Beyond this part, oddness starts...
.state('B.B',
{
url: '/B.B',
component: 'bPartB'
})
.state('B.C',
{
url: '/B.C',
component: 'bPartC'
});
$urlRouterProvider.otherwise('/Home');
$locationProvider.html5Mode({ enabled: true});
私たちは実際に私たちのルーティングを実行する方法は、コンポーネントを使用しています！
関連HTML：
<order-navigation validate-view="$ctrl.validate(someForm)"
previous-route="A.C"
previous-button-text="previous"
next-route="B.A"
next-button-text="continue">
</order-navigation>
注文ナビゲーションコンポーネントコントローラ：
export class OrderNavigationCtrl implements angular.IController {
//#region Variables/Properties
public nextRoute: string;
public previousRoute: string;
public nextButtonText: string;
public previousButtonText: string;
public validateView :() => boolean;
//#endregion Variables/Properties
//#region Constructor
public static $inject: string[] = ['$state', '$window'];
constructor(
private $state: angular.ui.IStateService,
private $window: angular.IWindowService) {
}
public $onInit(): void {
}
//#endregion Constructor
//#region Methods
public navigatePrevious(route: string): void {
if (route.search('www') > 0)
this.$window.open(route, '_self');
else
this.$state.go(route);
}
public navigateNext(route: string): void {
if (this.validateView())
this.$state.go(route);
}
//#endregion Methods
}
私は、各ページのHTMLをチェックし、BBまたはBCがリダイレクトさせるような何の誤字を発見しましたBAへ一般的なコンポーネントを使用しているため、コンポーネントコントローラにこの欠陥があった場合、すべてのページに均等に影響し、ページの更新を共通点に戻すことが期待されますが、そうではありません。
質問： A：自分自身ではなくB.BとB.CがB.Aにリダイレクトされる原因は何ですか。
B：B.BとB.Cが自分自身にリダイレクトされるように、どのように変更できますか？
可能な回避策： 一つ私の研究は、私にできることを示唆しているがUIルータの状態をキャッシュするuse localStorage and .run()にあります。私はこれを避けたいと思います。理想的には、このルーティングは「うまくいく」ためです。特別なことはしていません。私たちがこれで間違ってやっていることがあれば、それが何であるかを知る必要があるので、私のチームと私は間違ったことをしません。