如何从登录状态导航到抽象仪表板状态？

Question

https://plnkr.co/edit/ByatrCzdUJfAV3oc8XPq?p=preview

^在第10行，如果你放回abstract:true键，你会看到标签视图出现在这个plnkr应用程序中。

但是我的问题是，在我的真实应用中，它不允许我使用abstract密钥，因为您首先从login状态开始然后转换到dashboard州。

抽象键允许我将其他tags州添加为dashboard的子项。

当我在那里有那把钥匙并且我在我的真实应用程序中登录时，这是我得到的错误：

  

错误：无法转换为抽象状态＆＃39;仪表板＆＃39;

Plnkr代码：

var dash = {
  name: 'dash',
  url: '/dash?ticker',
  // abstract: true,
  views: {
    '': { templateUrl: 'dashboard.html' },
    'tickersList@dash': {
      templateUrl: 'tickers-list.html',
      controller: 'tickersController'
    },
    'alertsList@dash': {
      templateUrl: 'alerts-list.html',
      controller: 'alertsController'
    }
  }
};

var tags = {
  name: 'dash.tags',
  url: '?ticker',
  params: {
    ticker: 'AAA'
  },
  views: {
    'tagsList@dash': {
      templateUrl: 'tags-list.html',
      controller: 'tagsController'
    }
  }
}

$stateProvider
  .state(dash)
  .state(tags);

真实应用

的LoginController：

$state.go('dashboard')

STATE_CONSTANTS：

仪表板状态对象：

.constant('STATE_CONSTANTS', {
  dash: {
    name: 'dashboard',
    // abstract: true,
    url: `/dashboard?ticker?start_epoch?end_epoch?timespan?group?sort?term_id_1?term_id_2?term_id_3?social?stream?links?retweets?tags_open?feed_open?chart_alerts?chart_max`,
    views: {
        '': {
            templateUrl: 'dash/dashboard_container.html',
            controller: function(UserFactory, container, user) {
                this.container = container;
                UserFactory.storeUser(user);
            },
            controllerAs: 'dc',
            bindToController: true,
            resolve: {
                user: (AuthFactory) => AuthFactory.check_login(),
                settings: (user, UserFactory) => UserFactory.settings(user),
                container: ($stateParams, TagsFactory) => TagsFactory.createTerms($stateParams)
            }
        },
        'platformHeader@dashboard': {
            templateUrl: 'headers/platform/platform_header.html',
            controller: 'PlatformCtrl',
            controllerAs: 'ph'
        },
        'timespanHeader@dashboard': {
            templateUrl: 'headers/timespan/timespan_header.html',
            controller: 'TimeHeaderCtrl',
            controllerAs: 'thc'
        },
        'tickersPanel@dashboard': {
            templateUrl: 'tickers/panel/tickers_panel.html',
            controller: 'TickersPanelCtrl',
            controllerAs: 'tikp'
        },
    },
    params: {
        ticker: '',
    },
    data: { authorizedRoles: ['All'] }
},

登录状态对象：

login: {
    name: 'login',
    url: '/login',
    templateUrl: 'auth/login.html',
    controller: 'LoginCtrl',
    data: { authorizedRoles: ['All'] }
}

dashboard.html模板

<div>
    <header>
        <div ui-view="platformHeader"></div>
        <div ui-view="timespanHeader"></div>
    </header>

    <aside>
        <!-- the headers and tickersPanel are all child states of
             dashboard state -->
        <div ui-view="tickersPanel"></div>
        <!-- tags is a seperate state from dashboard -->
        <div ui-view="tagsPanel"></div>
    </aside>
//...

app.js

$stateProvider
    .state(STATE_CONSTANTS.login)
    .state(STATE_CONSTANTS.password)
    .state(STATE_CONSTANTS.passwordreset)
    .state(STATE_CONSTANTS.settings)
    .state(STATE_CONSTANTS.settingsDefault)
    .state(STATE_CONSTANTS.settingsAlerts)
    .state(STATE_CONSTANTS.dash)

Answer 1

行为是正确的。你无法转换到抽象状态。从plunker看你的例子。

var dash = {
  name: 'dash',
  url: '/dash?ticker'

var tags = {
  name: 'dash.tags',
  url: '?ticker',

你有一个抽象状态“破折号”，你有一个不是抽象的子状态“dash.tags”。所以你只能过渡到孩子的状态。

在您的应用中，您尝试转换为不可能的抽象状态。 如果您想要具有一些具有共同行为的基本状态（父状态），则使用抽象状态。你不能转移到这样的州，但他们可以有一些基本的模板，解决功能...所以，你必须删除抽象标志或创建一个子状态。