Binding in Component Router - Angular 1.5

Question

Ich habe Probleme mit der Bindung in Component Router.

Es wird gesagt im Entwicklerhandbuch sollten Sie vermeiden, $ scope in Komponenten zu verwenden, daher müssen Objekte durch Binding übergeben werden.

Anhand von Beispielen in: https://docs.angularjs.org/guide/component und https://docs.angularjs.org/guide/component-router ich kam mit:

HTML:

<div ng-app="app" ng-controller="MainCtrl as ctrl"> 
    {{ ctrl.hero.name }} 
    <app></app> 
</div> 

Javascript:

'use strict'; 

var app = angular.module('app', [ 
    'ngComponentRouter', 
    'testComponent', 
]) 

.config(function($locationProvider) { 
    $locationProvider.html5Mode(true); 
}) 

.value('$routerRootComponent', 'app') 

.controller('MainCtrl', function(){ 
    this.hero = { 
     name: 'Spawn' 
    }; 
}) 

.component('app', { 
    template: '<ng-outlet></ng-outlet>', 
    $routeConfig: [ 
     {path: '/test', name: 'Test', component: 'testComponent'}, 
    ], 
}) 

var testComponent = angular.module('testComponent', []); 

testComponent.component('testComponent', { 
    template: '<span>Name: {{$ctrl.hero.name}}</span>', 
    controller: TestComponentController, 
    bindings: { 
     hero: '=', 
    } 
}); 

function TestComponentController() { 
} 

Aber <span>Name: {{$ctrl.hero.name}}</span> zeigt nicht "Spawn" oder etwas.

Answer 1

Sie können die "Bindings" -Definition in Router-Komponenten nicht verwenden, da die Komponente keine HTML-Verwendung besitzt, die Sie steuern würden.

Wenn Sie Daten an die Routing-Komponente übergeben müssen, würden Sie im $ routerOnActivate-Callback auf Routing-Parameter zugreifen.

https://docs.angularjs.org/guide/component-router

Beispielcode begann hier zu erhalten: https://github.com/brandonroberts/angularjs-component-router/

Answer 2

Wenn Sie immer noch diese benötigen, i die diese Bindungen arbeitet mit html attr Sie html sein sollte enter <div ng-app="app" ng-controller="MainCtrl as ctrl"> {{ ctrl.hero.name }} <app hero="ctrl.hero.name"></app> </div> und Ihre Bindung Ich denke, sollte bindings: { hero: '<' }

Answer 3

Ich glaube nicht, es ist eine gute Lösung für dass noch im ngComponentRouter für eckigen 1.x. Da es sich immer noch in der aktiven Entwicklung befindet, hoffe ich, dass in den nächsten Iterationen eine bessere Lösung entstehen wird.

In der Zwischenzeit, was ich tue, ist, dass ich die Komponente abhängig von ihrer Eltern über erfordert.

EDIT: Ich verstehe jetzt, dass Sie MainCtrl als Top-Controller behalten wollen, so habe ich den Code bearbeitet:

.component('app', { 
    template: '<ng-outlet></ng-outlet>', 
    bindings: { 
     hero: '<' // we have to bind here since you want to pass it from MainCtrl 
    }, 
    $routeConfig: [ 
     {path: '/test', name: 'Test', component: 'testComponent'} 
    ], 
}) 

var testComponent = angular.module('testComponent', []); 

testComponent.component('testComponent', { 
    template: '<span>Name: {{$ctrl.hero.name}}</span>', 
    controller: TestComponentController, 
    require: { 
     appCtrl: '^app', 
    } 
}); 
function TestComponentController() { 
    var ctrl = this; 
    ctrl.$onInit = function(){ 
    ctrl.hero = ctrl.appCtrl.hero 
    } 
} 

Und dann html dann sein sollte:

Arbeits

<div ng-app="app" ng-controller="MainCtrl as ctrl"> 
    <app hero="ctrl.hero"></app> 
</div> 

anzeigen codepen: http://codepen.io/bchazalet/pen/qZYzXM?editors=1111

Es ist nicht ideal, weil es eine Abhängigkeit (in Ihrem Fall von testComponent zu app) einführt, aber es funktioniert.