0

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

ui路由器配置代码：

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


$urlRouterProvider.otherwise('/');

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

索引.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

4

1 回答 1

0

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

  • 具有父子关系的示例 - 此示例在ui-view整个应用程序中使用。parent-component加载了它自己的状态，而不是abstract. 如果您想在同一个地方为不同的状态加载不同的模板，这种方法很好。
  • 混合方法的示例。此示例遵循您当前的应用程序结构，parent-component并index.html在您的parent-component. 您可以看到您确实不需要parent此处的状态，因为您已将您的状态parent-component直接放入index.html文件中。状态child已加载到您的内部parent-component，并且不需要父状态。
于 2017-03-30T08:21:35.637 回答