ui-router child 未显示 angularjs 组件的视图

Question

我有一个 angularjs 组件（几乎是空标记）充当其 child 视图（具有不同 columns/formats 的标记）的 shell/parent。我可以看到该组件，但未加载 child 个视图。

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>

parent，这是一个组件：

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

child:

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

我的控制器告诉 ui-router 转到 child 视图：

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

我不想将 parent 声明为抽象的，因为在我的真实应用中，我有与 parent 组件视图平行的视图（它们一起形成一个多命名视图）并且这些其他高级视图（parent 组件除外）必须可见，而不管 child 视图如何。

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

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

Answer 1

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

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

ui-router child 未显示 angularjs 组件的视图

ui-router child view of an angularjs component not showing

uiview

angularjs

nested-views

angular-ui-router

angularjs-components