组件路由器中的绑定 - Angular 1.5

Question

我在组件路由器中遇到绑定问题。

在开发人员指南中说你应该避免在组件中使用 $scope 因此对象必须通过绑定传递。

基于以下示例： https://docs.angularjs.org/guide/component and https://docs.angularjs.org/guide/component-router 我想到了：

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() {
}

但是 <span>Name: {{$ctrl.hero.name}}</span> 没有显示 "Spawn" 或任何东西。

Answer 1

如果你仍然需要这个，我这个绑定与 html attr 一起工作，所以你 html 应该是 enter <div ng-app="app" ng-controller="MainCtrl as ctrl"> {{ ctrl.hero.name }} <app hero="ctrl.hero.name"></app> </div> 你的绑定我认为应该是 bindings: { hero: '<' }

Answer 2

我认为 angular 1.x 的 ngComponentRouter 中还没有好的解决方案。由于它仍在积极开发中，我希望在下一次迭代中会出现更好的解决方案。

与此同时，我所做的是通过 require 使组件依赖于其父组件。

编辑：我现在明白你想保留 MainCtrl 作为顶级控制器，所以我编辑了代码：

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

然后 html 应该是：

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

查看工作代码笔：http://codepen.io/bchazalet/pen/qZYzXM?editors=1111

这并不理想，因为它引入了依赖项（在您的情况下是从 testComponent 到应用程序），但它确实有效。

Answer 3

您不能在路由器组件中使用 "bindings" 定义，因为该组件没有任何您可以控制的 HTML 使用。

如果您需要将数据传递给路由组件，您可以在 $routerOnActivate 回调中访问路由参数。

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

从这里开始的示例代码：https://github.com/brandonroberts/angularjs-component-router/

组件路由器中的绑定 - Angular 1.5

Binding in Component Router - Angular 1.5

javascript

angularjs

ngcomponentrouter