使用 Angular UI Router 渲染组件答案

【问题标题】：Rendering a component with Angular UI Router使用 Angular UI Router 渲染组件
【发布时间】：2023-04-06 15:30:01
【问题描述】：

当我将 url 更改为“/nameDisplay”时，我似乎无法显示“nameDisplay”组件。它没有显示任何错误，只是没有将模板插入到 ui-view 中。如果我在“状态”而不是组件中使用模板，那么它可以正常工作，否则它什么也不显示。

我使用的版本控制是：角度 - 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;

【问题讨论】：

我从未将component 视为state 对象的属性...这是一种新语法吗？通常，这是通过template: '<name-display></name-display>' 来完成的。

标签： angularjs angular-ui-router

【解决方案1】：

直接在 ui-router 配置中使用组件仅适用于 ui-router 1.0.0 以后。因此，您应该升级到（目前仍然是）beta 版本，或者使用 0.3.x 样式来包含使用 <name-display></name-display> 模板的组件。

在此处查看我对类似问题的回答：Angular 1.5 - UI-Router, Resolve Object returning undefined values

【讨论】：