angularjs組件的ui-router子視圖未顯示

Question

我有一個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'
  });

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

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

Answer 1

您沒有提供要完成的詳細信息，因此根據當前的外觀，您有兩種選擇：要么在整個應用程序中使用ui-view模板，要么使用ui-router的父子關系或采用混合方法來加載組件，並在其中加載要顯示的狀態。

實施例與親子關系-該示例使用ui-view整個應用程序。 parent-component加載了它自己的狀態，而不是abstract 。 如果要在同一位置為不同狀態加載不同的模板，則此方法很好。
混合方法示例。 本示例遵循與當前的應用程序結構parent-component在加載index.html並在加載的狀態下parent-component 。 您可以看到這里確實不需要parent狀態，因為您已將parent-component直接放置在index.html文件中。 狀態child被加載到您的parent-component內部，不需要父級狀態。

angularjs組件的ui-router子視圖未顯示

問題描述

1 個解決方案

解決方案1
0 已采納 2017-03-30 08:21:35

angularjs組件的ui-router子視圖未顯示

問題描述

1 個解決方案

解決方案1 0 已采納 2017-03-30 08:21:35

解決方案1
0 已采納 2017-03-30 08:21:35