0

我正在为组件路由器中的绑定而苦苦挣扎。

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

基于示例： https://docs.angularjs.org/guide/component和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”或任何东西。

4

3 回答 3

2

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

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

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

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

于 2016-04-20T06:35:01.227 回答
1

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

同时，我所做的是通过 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 到应用程序），但它可以工作。

于 2016-04-14T11:35:43.200 回答
-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: '<' }

于 2016-04-11T13:39:36.080 回答