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

Question

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

预期

login 后dashboard 状态渲染dashboard.html，所有组件和ui-views 都应该渲染：tickers、tags、 社交（命名为 ui-view）和 feed。

结果

login 之后，dashboard 状态会呈现 dashboard.html，但是只有组件 tickers、tags 和 feed > 出现，但不是社交（命名的ui-view）

我觉得我的问题在于我从login 状态转换到dashboard 状态的某个地方。进入仪表板状态后，它会提供默认模板，即组件元素标签：<dash-module></dash-module>。这将呈现 dash.component 模板：dashboard.html 和控制器。但是，我无法访问仪表板状态对象中的社交视图。

---

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

我对你的 plunker 进行了更改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 了解更多信息。

Answer 2

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

更改以下内容，它应该可以工作。

social@dashboard

查看Plunkr

Named Views UI router