1

我正在尝试使用 typescript 和组件控制器类的 Angular 1.5.3 组件路由器，但我无法将当前路由器注入到我的任何带有绑定的组件中：{$router:'<'}。当我在 chrome 调试器中检查任何组件的 $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)
    ;
4

1 回答 1

0

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

所以我在应用程序入口点组件中使用了 $rootRouter，在子组件中我使用了“this.$router”。这样它就可以工作，但我不知道这是预期的行为还是我做错了什么......

当我在 Angular 文档中阅读以下内容（https://docs.angularjs.org/guide/component-router）时，我来到了该解决方案：

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

应用程序入口点“< app>< /app>”不在 ng-outlet 内，因此可能与此有关

于 2016-05-31T16:41:04.980 回答