angularjs组件的ui-router子视图未显示答案

【问题标题】：ui-router child view of an angularjs component not showingangularjs组件的ui-router子视图未显示
【发布时间】：2017-08-23 12:50:30
【问题描述】：

我有一个 angularjs 组件（几乎是空的标记）作为其子视图的外壳/父级（具有不同列/格式的标记）。我可以看到组件，但没有加载子视图。

ui-router 配置代码：

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


$urlRouterProvider.otherwise('/');

$stateProvider
  .state('parent', {
    url: '',
    views: {
      'parentComponent': {
        component: 'parentComponent'
      }
    }
  })
  .state('parent.child', {
    url: '/child',
    templateUrl: 'child.html'
  });

index.html:

<body ng-app="app" >
 <div ng-controller='RoutingCtrl'>
   <parent-component></parent-component>
 </div>
</body>

父级，它是一个组件：

<!DOCTYPE html>
<div>
    <br />
    <br />
    <div>I am the parent, a angularjs component.</div>
    <div>There sould be the nested/child view right below:</div>
    <div ui-view></div>
</div>

孩子：

<div>Hi! I am the child!</div>

我的控制器告诉 ui-router 进入子视图：

$state.go('parent.child');

我不想将父级声明为抽象，因为在我的真实应用程序中，我有与父级组件视图平行的视图（一起，它们形成一个多命名视图）和这些其他高级视图（父级除外无论子视图如何，组件都必须可见。

我正在使用 angularjs 1.5.8 和 ui-router 版本 0.4.2

Plunker： http://plnkr.co/edit/tBhVTjttMagaJzHQNvro?p=preview

【问题讨论】：

标签： angularjs uiview angular-ui-router angularjs-components nested-views

【解决方案1】：

你没有提供任何你想要完成的细节，所以根据现在的情况，你有两个选择：要么在整个应用程序中使用 ui-view 模板，要么使用父子关系ui-router 或采用混合方法加载您的组件，并在其中显示您想要显示的状态。

Example 具有父子关系 - 此示例在整个应用程序中使用 ui-view。 parent-component 加载了它自己的状态，而不是 abstract。如果您想在同一个地方为不同的状态加载不同的模板，这种方法很好。
Example 采用混合方法。此示例遵循您当前的应用程序结构，index.html 中加载了parent-component，parent-component 中加载了一个状态。你可以看到你真的不需要parent 状态，因为你已经将parent-component 直接放在index.html 文件中。状态 child 已加载到您的 parent-component 中，它不需要父状态。

【讨论】：

非常感谢您的出色回答，eminlala！以下是我想要完成的更多细节：组件部分的目的是显示搜索结果，其输入来自 index.html 页面的不同部分。我确保输入在组件的父范围内。输入参数可以不同，因此组件中显示的数据列/格式也不同。另一个重要要求是组件还必须能够使用 url 参数（使用 $stateparams）。我仍然不明白为什么我的 plunker 不工作。
没问题 :)，如果这对您有任何帮助，您可以投票。您提供的 Plunker 链接在定义 parent.child 状态时出错。要么删除 views: 部分，要么像为 parent 状态所做的那样添加它。
我真的很想投票但没有资格。 Stackoverflow 需要至少 15 个信誉才能投票