Javascript 组件路由器中的绑定-角度1.5

我正在努力解决组件路由器中的绑定问题

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

基于以下示例： 我想到了：

HTML:

{{ctrl.hero.name}

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

“严格使用”；
var app=角度。模块（'app'[
“ngComponentRouter”，
“测试组件”，
])
.config（函数（$locationProvider）{
$locationProvider.html5Mode（true）；
})
.value（“$RouterRotComponent”，“应用程序”）
.controller（'MainCtrl'，function（）{
这个。英雄={
名称：“繁殖”
};
})
.component（'app'{
模板：“”，
$routeConfig：[
{路径：'/test'，名称：'test'，组件：'testComponent'}，
],
})
var testComponent=angular.module（'testComponent'，[]）；
testComponent.component（'testComponent'{
模板：{{$ctrl.hero.Name}}，
控制器：TestComponentController，
绑定：{
英雄：“=”，
}
});
函数TestComponentController（）{
}

---

但是

Name:{{$ctrl.hero.Name}

不显示“Spawn”或任何东西。

如果您仍然需要此功能，我将此绑定与html attr一起工作，因此您应该使用html

enter
{{ctrl.hero.name}

我想你的约束应该是

绑定：{
英雄：“如果您仍然需要它，我认为绑定可以与HTMLattr一起使用，因此您应该使用html
enter
{{ctrl.hero.name}

我想你的约束应该是
绑定：{
英雄：“我认为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
  }
}

.component（'app'{
模板：“”，
绑定：{
英雄：“我认为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
  }
}

.component（'app'{
模板：“”，
绑定：{
英雄：“您不能在路由器组件中使用“绑定”定义，因为该组件没有任何您可以控制的HTML使用

如果需要将数据传入路由组件，则可以访问$routerOnActivate回调中的路由参数


此处开始的示例代码：
您不能在路由器组件中使用“绑定”定义，因为该组件没有任何您可以控制的HTML使用

如果需要将数据传入路由组件，则可以访问$routerOnActivate回调中的路由参数


从这里开始的示例代码：
是的，因为你没有
，而你有
，根据我的经验，
ng outlet
只能绑定
$$router
，其他什么都不能绑定。你需要像那样通过html attr传递绑定值。我建议将应用程序组件与主组件分开你有
是的，因为你没有
而你有
，根据我的经验，
ng outlet
只能绑定
$$router
，其他什么都不能绑定。你需要像那样通过html attr传递绑定的值。我建议将应用程序组件与主组件分离，这样你就有了
Hi@Boris，t他的也不起作用…在你的代码笔上看到一个工作叉（我会同时更新我的回复）：嗨@Boris，这也不起作用…在你的代码笔上看到一个工作叉（我会同时更新我的回复）：谢谢你的澄清，谢谢你的澄清
<div ng-app="app" ng-controller="MainCtrl as ctrl">
  <app hero="ctrl.hero"></app>
</div>