角1.5.3 &类型记录& ngComponentRouter :绑定：{$路由器：‘<’}总是返回未定义的路由器属性

Question

我正在使用类型记录和组件控制器类尝试使用角1.5.3的组件路由器，但是我没有将当前的路由器插入到绑定：{$路由器：‘<’}的任何组件中。当我检查$ctrl中的任何铬调试器组件时，它总是显示未定义的。路由本身就像预期的那样工作(组件显示，路由链接工作，$routerOnActivate被调用)。我需要$router从代码中导航。

html页面：

   <div ng-app="app">
        <app></app>
   </div>

密码

class AppCtrl {
}

var appComp: ng.IComponentOptions = {
    template: `App <ng-outlet></ng-outlet>`,
    $routeConfig: [
        { path: '/', name: 'List', component: 'listComp', useAsDefault: true },
        { path: '/new', name:'New', component:'newComp'}
    ],
    bindings: { $router: '<' },
    controller:AppCtrl
};

class ListCtrl {
    message = '';
    $routerOnActivate=() => {
        this.message = 'is activated';
    }
}

var listComp: ng.IComponentOptions = {
    template: `<div><h1>List : {{$ctrl.message}}</h1><a ng-link="['New']">new</a></div>`,
    bindings: { $router: '<' },
    controller: ListCtrl
};

class NewCtrl {
    message = '';
    $routerOnActivate = () => {
        this.message = 'New is activated';
    }
}

var newComp: ng.IComponentOptions = {
    template: `<div><h2>New : {{$ctrl.message}}</h2></div>`,
    bindings: { $router: '<' },
    controller: NewCtrl,
}


angular.module('app', ['ngComponentRouter'])
    .value('$routerRootComponent', 'app')
    .component('app', appComp)
    .component('listComp', listComp)
    .component('newComp', newComp)
    ;

Answer 1

好的，我没有足够的声誉来添加评论，所以我必须这样写。我也遇到过同样的问题，并意识到$router在我的“主”应用程序组件中是没有定义的。

因此，我在应用程序入口点组件中使用了$rootRouter，在子组件中使用了“this.$路由器”。这样做是可行的，但我不知道这是预期的行为，还是我做错了什么…

当我在角文档中阅读了以下内容(https://docs.angularjs.org/guide/component-router)时，我找到了这个解决方案：

每个组件都有自己的路由器。与角2不同的是，我们不能使用依赖注入器来获取组件的路由器。我们只能注射$rootRouter。相反，我们使用这样的事实:ng出口指令将当前路由器绑定到组件上的$router属性。

应用程序入口点"< app>< /app>“不在ng插座内，所以它可能与此有关。