ui-router Kindansicht einer angularjs-Komponente, die nicht angezeigt wird

Ich habe eine angularjs-Komponente (fast leeres Markup), die als Shell/Parent für ihre untergeordneten Ansichten fungiert (Markups mit verschiedenen Spalten/Formaten). Ich kann die Komponente sehen, aber keine untergeordneten Ansichten werden geladen.ui-router Kindansicht einer angularjs-Komponente, die nicht angezeigt wird

ui-Router-Konfigurationscode:

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

Der Elternteil, das eine Komponente ist:

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

Kind:

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

Mein Controller sagt ui-Router Kind Blick zu gehen:

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

Ich will nicht Elternteil als abstrakt deklarieren, weil in meinem wirklichen app, ich habe Blick auf die übergeordnete Komponente Ansicht parallel (zusammen, Sie bilden hier eine Ansicht mit mehreren Namen. Diese anderen Ansichten auf hoher Ebene (mit Ausnahme der übergeordneten Komponente) müssen unabhängig von den untergeordneten Ansichten sichtbar sein.

I AngularJS 1.5.8 und ui-Router Version 0.4.2

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

Quelle

2017-03-29 joehuangathome

Sie haben keine Angaben gemacht, was Sie versuchen zu erreichen, so auf das, was es Jetzt haben Sie zwei Möglichkeiten: entweder gehen Sie mit der ui-view Vorlage in Ihrer App und verwenden Sie die Eltern-Kind-Beziehung von ui-router oder gehen Sie mit Hybrid-Ansatz des Ladens Ihrer Komponente, und darin ein Zustand, den Sie zeigen möchten.

Example mit Eltern-Kind-Beziehung - In diesem Beispiel wird ui-view im gesamten App. parent-component ist mit seinem eigenen Zustand geladen und es ist nicht abstract. Dieser Ansatz ist gut, wenn Sie verschiedene Vorlagen für verschiedene Zustände an derselben Stelle laden möchten.
Example mit Hybrid-Ansatz. Dieses Beispiel folgt Ihrer aktuellen App-Struktur mit parent-component geladen in index.html und einem Zustand geladen in Ihrem parent-component. Sie können sehen, dass Sie wirklich keinen parent Zustand hier benötigen, wie Sie Ihre parent-component direkt in index.html Datei haben. Der Status child ist in Ihrem parent-component geladen und es benötigt keinen übergeordneten Status.

Quelle

2017-03-30 08:21:35 eminlala

Wirklich zu schätzen Ihre ausgezeichneten Antworten, eminlala !! Hier sind weitere Details von dem, was ich zu erreichen versuche:. Der Zweck der Komponente ist es, Suchergebnisse anzuzeigen, deren Eingabe von verschiedenen Teilen der index.html Seiten kommt. Ich habe sichergestellt, dass die Eingabe im übergeordneten Bereich der Komponente liegt. Die Eingabeparameter können unterschiedlich sein, so dass die in der Komponente gezeigten Spalten/Formate der Daten ebenfalls unterschiedlich sind. Eine weitere wichtige Voraussetzung ist, dass die Komponente auch URL-Parameter verwenden kann (mit $ stateparams). Ich verstehe immer noch nicht, warum mein Plünderer nicht funktioniert. – joehuangathome

Kein Problem :), wenn dir das irgendwie hilft, kannst du es abstimmen. Der von Ihnen angegebene Plunker-Link hat beim Definieren des Status "parent.child" einen Fehler verursacht. Entweder löschen Sie einfach den 'views:' Teil oder fügen Sie ihn wie für den übergeordneten Status hinzu. – eminlala

Ich wollte es wirklich wählen aber nicht wählbar.Stackoverflow benötigt mindestens 15 Reputationen um abzustimmen – joehuangathome

ui-router Kindansicht einer angularjs-Komponente, die nicht angezeigt wird

Antwort

Verwandte Themen