Angular Ionic UI-Router - 如何确保在嵌套状态下启动应用程序时加载所有父视图

Angular Ionic UI-Router - how to ensure all the parent views are loaded when starting the app in a nested state?

本文关键字：应用程序 启动 状态 加载 视图 嵌套 UI-Router Ionic 何确保 确保 Angular      更新时间：2023-09-26

>我有一个ui-router结构：

    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'menu.html',
    })
    .state('app.parent', {
      url: '/parent',
      views: {
        'menuContent': {
          templateUrl: 'parent.html',
        }
      }
    })    
    .state('app.parent.next', {
      url: '/next',
      views : {
        'next' : {
          templateUrl: 'next.html'
        }
      } 
    })

parent.html包含ui-view和指向app.parent.next的链接 

<ion-view view-title="Parent">
  <ion-nav-buttons side="secondary">
    <button class="button" ng-click="$state.go('app.parent.next')">
      next »
    </button>
  </ion-nav-buttons>
  <ion-content has-header="true">
    <h1>Parent</h1>
    <div ui-view></div>
  </ion-content>
</ion-view>

它工作得很好，但是如果我直接在app.parent.next状态下启动应用程序，则标题和模板不存在。

  • http://michalstefanow.com/ionic.html#/app/parent - 工作正常
  • http://michalstefanow.com/ionic.html#/app/parent/next - next加载嵌套视图，它只是父视图中定义的ion-nav-buttons不存在

（提供指向托管版本的链接，因为要重现它必须以嵌套状态启动）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link data-require="ionic@1.2.4" data-semver="1.2.4" rel="stylesheet" href="https://code.ionicframework.com/nightly/css/ionic.css" />
    <script data-require="ionic@1.2.4" data-semver="1.2.4" src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script>
      angular.module('starter', ['ionic'])
      .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
        .state('app', {
          url: '/app',
          abstract: true,
          templateUrl: 'menu.html',
        })
        .state('app.parent', {
          url: '/parent',
          views: {
            'menuContent': {
              templateUrl: 'parent.html',
            }
          }
        })    
        .state('app.parent.next', {
          url: '/next',
          views : {
            'next' : {
              templateUrl: 'next.html'
            }
          } 
        })
        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/parent');
      })      
    </script>
    
  </head>
  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
    <script type="text/ng-template" id="menu.html">
      <ion-side-menus enable-menu-with-back-views="false">
        <ion-side-menu-content>
          <ion-nav-bar style="background-color: transparent !important;">
            <ion-nav-back-button>
            </ion-nav-back-button>
            <ion-nav-buttons side="left">
              <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
              </button>
            </ion-nav-buttons>
          </ion-nav-bar>
          <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>
        <ion-side-menu side="left">
          <ion-header-bar class="bar-stable">
            <h1 class="title">Left</h1>
          </ion-header-bar>
          <ion-content>
            <ion-list>
              <ion-item menu-close href="#/app/parent">
                Parent
              </ion-item>
              <ion-item menu-close href="#/app/parent/next">
                Directly into next
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-side-menu>
      </ion-side-menus>
    </script>
    <script type="text/ng-template" id="parent.html">
      <ion-view view-title="Parent">
        
        <ion-nav-buttons side="secondary">
          <button class="button" ui-sref='app.parent.next'>next »</button>
        </ion-nav-buttons>
        
        <ion-content has-header="true">
          <h1>Parent</h1>
          <h1>Parent</h1>
          <h1>Parent</h1>
          
          <div ui-view="next"></div>
        </ion-content>
      </ion-view>
    </script>
    <script type="text/ng-template" id="next.html">
      <h1>Next</h1>
      <h1>Next</h1>
      <h1>Next</h1>
    </script>
  </body>
</html>

我已经尝试过纯ui-router实现类似的东西：

  • http://michalstefanow.com/ui-router.html#/app/parent
  • http://michalstefanow.com/ui-router.html#/app/parent/child

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>UI Router</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
    <script>
     
      angular.module('starter', ['ui.router'])
      .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
        .state('app', {
          url: '/app',
          abstract: true,
          templateUrl: 'main.html',
        })
        .state('app.parent', {
          url: '/parent',
          views: {
            'main': {
              templateUrl: 'parent.html',
            }
          }
        })    
        .state('app.parent.child', {
          url: '/child',
          templateUrl: 'child.html'
        })
        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/parent');
      });
    </script>
    
  </head>
  <body ng-app="starter">
    <div ui-view></div>
    <script type="text/ng-template" id="main.html">
      <h1>This is main.html</h1>
      Below is:
      <pre>ui-view="main"</pre>
      <div ui-view="main"></div>
    </script>    
    <script type="text/ng-template" id="parent.html">
      <h1>Parent</h1>
          
      <a ui-sref="app.parent.child">child »</a>
      <div ui-view></div>
    </script>
    <script type="text/ng-template" id="child.html">
      <h1>I am a child</h1>
    </script>
  </body>
</html>

推测猜测：由于缓存Ionic特定的东西 - 使用 ui 路由器和离子选项卡时模板不会更新？

我到底想做什么？只是为了避免XY问题 - https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem - 我想指导用户上传图像。将有几个步骤，用户将直接进入状态app.upload.one，而无需直接触摸app.upload。 app.upload将保持上传过程的当前状态，而每个步骤都将添加描述、标签等......

我认为Ionic是单页应用，所以只有一个父级（是root，像tabs或menu），其他的都是子级，特别重要的是其他人都是兄弟姐妹，所以不可能是父子关系。简而言之，您只能使用一个点表示法，例如app.child，不喜欢app.child.grandchild有两个点表示法。

相关文章：