How to navigate from a login state to an abstract dashboard state?

问题

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

^ On line 10, if you put back in the abstract:true key you will see the tags view appear in this plnkr app.

---

However my problem is that in my real app it won't let me use the abstract key because you first start at a login state and then transition to the dashboard state.

And the abstract key allows me to add the additional tags state as a child of dashboard.

When I have that key in there and I login in my real app this is the error I get:

Error: Cannot transition to abstract state 'dashboard'

Plnkr code:

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);

---

Real app

LoginController:

$state.go('dashboard')

STATE_CONSTANTS:

dashboard state object:

.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 state object:

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

dashboard.html template

<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)

回答1:

The behavior is right. You cannot transit to abstract state. Look at your example from plunker.

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

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

You have an abstract state "dash" and you have a child state "dash.tags" which is not abstract. So you can transit only to child state.

In your app, you try transiting to an abstract state which is not possible. Abstract states are used if you want to have some basic state with common behavior (parent state). You cannot transit to such states but they can have some basic template, resolve functions... So, you have to remove abstract flag or create a child state.

来源：https://stackoverflow.com/questions/42813677/how-to-navigate-from-a-login-state-to-an-abstract-dashboard-state