AngularJS : 子状态 return 父视图

Question

我正在使用 angularJs 和 ES6。因此每个视图都是模块。

模块项目：

let projectModule = angular.module('project', [
  uiRouter
])

.config(function($stateProvider, $urlMatcherFactoryProvider) {

  $stateProvider
    .state('project', {
      url: '/projects/:origin/:owner/:name',
      template: '<project></project>',
      data : { pageTitle: 'Project' },
    });

})

.component('project', projectComponent)

.factory('$projectResource', service);

模块警报（其状态是项目状态的子状态）：

let alertsModule = angular.module('alerts', [
  uiRouter
])

.config(($stateProvider) => {

  $stateProvider
    .state('project.alerts', {
      url: '/alerts',
      template: '<alerts></alerts>',
      data : { pageTitle: 'Alerts' }
    });

})

.component('alerts', alertsComponent);

所有视图都由组件管理，并从定义的模板属性中以其相关状态显示。

<alerts></alerts>

组件定义如下：

import template from './alerts.html';
import controller from './alerts.controller';
import './alerts.scss';

let alertsComponent = {

  restrict: 'E',
  template: template,
  controller: controller,
  controllerAs: 'vm',
  bindings: true

};

export default alertsComponent;

视图是这样调用的：

<a ui-sref="project.alerts({ origin: project.origin, owner: project.owner.name, name: project.name })">Alerts</a>

或者，如果我已经在项目中了：

<a ui-sref="project.alerts">Alerts</a>

两个 href 都正确显示：

/projects/github/btribouillet/btproject/alerts

但我看到的是父视图：

<project></project>

虽然应该是：

<alerts></alerts>

我做错了什么？到目前为止的解决方案是拥有彼此独立的状态。但我正在尝试构建一个面包屑模块，我希望能够访问父状态。如果状态相互独立，这是不可能的。

更新：

我的主要观点是 app.html :

<!-- Place all UI elements intended to be present across all routes in this file -->
<div class="site-wrapper">
  <navbar></navbar>
  <div class="view" ui-view></div>
  <navfooter></navfooter>
</div>

Answer 1

您忘记在 "project" 组件 html 中放置一个 ui-view 指令，所以子状态没有地方可以加载。

AngularJS : 子状态 return 父视图

AngularJS : child state return parent view

javascript

angularjs

ecmascript-6

ui-sref