$ state的子视图未在命名的ui-view中呈现

Question

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

预期

login 后，dashboard状态呈现dashboard.html，所有组件和ui视图都应呈现：代码，标记，社交（名为ui-view）和 Feed 。

结果

login 后，dashboard州呈现dashboard.html，但只有代码，代码和 Feed < / strong>显示，但不是社交（named-ui-view）

我觉得我的问题就在我从login状态转换到dashboard状态的某个地方。点击仪表板状态后，它会提供默认模板，即组件元素标记：<dash-module></dash-module>。然后，这将呈现dash.component模板：dashboard.html和controller。但是，我在仪表板状态对象中失去了对社交视图的访问权限。

dashboard.html

<div class="jumbotron text-center">
    <h1>The Dashboard</h1>
</div>

<div class="row">
  <tickers-module></tickers-module>
  <tags-module></tags-module>

  // Expecting the social-module-template.html to show below:
  <div ui-view="social"></div> 

  <feed-module></feed-module>
</div>

带有信息中心组件的routerApp模块 Plnkr中的完整代码

// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'tickers', 'tags', 'feed']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/login');

    const login = {
      name: 'login',
      url: '/login',
      templateUrl: 'login.html',
      bindToController: true,
      controllerAs: 'l',
      controller: function($state) {
        this.login = function() {
          $state.go('dashboard', {});
        }
      }
    }

    const dashboard = {
      name: 'dashboard',
      url: '/dashboard',
      params: {
        ticker: {},
        tags: {}
      },
      template: '<dash-module></dash-module>',
      views: {
        '' : {
          templateUrl: 'dashboard.html',
        },
        'social' : {
          templateUrl: 'social-module-template.html', 
          controller: function($state) {
            console.log('Social init', $state.params);
          }
        }
      }
    }

    $stateProvider
      .state(login)
      .state(dashboard);
})
tags.component('dashModule', {
  templateUrl: 'dashboard.html',
  controller: function($scope, $state) {
    console.log('dashModule loaded!');
  }
})

这是应该在<div ui-view="social"></div>

中呈现社交html内容的部分

views: {
  '' : {
    templateUrl: 'dashboard.html',
  },
  'social' : {
    templateUrl: 'social-module-template.html', 
    controller: function($state) {
      console.log('Social init', $state.params);
    }
  }
}

Answer 1

您遇到的问题是视图必须呈现相同的状态，即仪表板。

更改以下内容并应该有效。

social@dashboard

选中此Plunkr

Named Views UI router

Answer 2

我对你的羽毛球进行了更改here你错过了@ here。

const dashboard = {
  name: 'dashboard',
  url: '/dashboard',
  params: {
    ticker: {},
    tags: {}
  },
  template: '<dash-module></dash-module>',
  views: {
    '' : {
      templateUrl: 'dashboard.html',
    },
    'social@dashboard' : {
      templateUrl: 'social-module-template.html', 
      controller: function($state) {
        console.log('Social init', $state.params);
      }
    }
  }
}

  

为了使这些组件出现在home状态下，我们必须使用绝对命名来定义它们。具体来说，我们必须使用@语法告诉AngularJS我们的应用程序的这些组件应该映射到特定的状态。这遵循viewName @ stateName语法，并告诉我们的应用程序使用绝对或特定状态的命名视图。您可以阅读有关相对与绝对名称here的更多信息。

有关详细信息，请参阅this。