使用Angular UI路由器呈现组件

Question

当我将url更改为“/ nameDisplay”时，我似乎无法获取我的'nameDisplay'组件。它不显示任何错误，它只是不插入模板到UI视图。如果我在'状态'中使用模板而不是组件，那么它可以工作，否则它不显示任何内容。

我使用的版本是： 角 - 1.5.8 角UI路由器 - 直接在用户界面路由器配置0.3.1

angular.module('app.nameDisplay', [uiRouter]) 
.component('nameDisplay', { 
    controller: function(){ 
     this.name = "Keir Beckett"; 
     this.age = 24; 
     this.changeInfo = function(){ 
      this.name = "Golash Bista"; 
      this.age = 66; 
     } 
    }, 
    template: "" + 
     "<div>" + 
      "<h2>{{$ctrl.name}}</h2>" + 
      "<h4>{{$ctrl.age}}</h4>" + 
      "<button ng-click='$ctrl.changeInfo()'>Change Info</button>" + 
     "</div>" 
}).config(($stateProvider, $urlRouterProvider) => { 
    $stateProvider.state('nameDisplay', { 
     url: '/nameDisplay', 
     component: 'nameDisplay' 
    }) 
    .state("otherDisplay", { 
     url: '/otherDisplay', 
     template: '<h1>Other Display</h1>' 
    }); 
    $urlRouterProvider.otherwise('/'); 
}) 
.name; 

Answer 1

使用组件只能从UI路由器1.0工作。 0开启。所以你应该升级到（目前还是）测试版，或者使用0.3.x样式来使用<name-display></name-display>的模板包含组件。

见我的回答了类似的问题在这里：Angular 1.5 - UI-Router, Resolve Object returning undefined values