Question

我有一个angularjs组件（几乎为空标记）充当其子视图的shell / parent（具有不同列/格式的标记）。我能够看到组件但没有加载子视图。

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

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内，并且不需要父状态。

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

1 个答案: