使用 Angular UI Router 渲染组件

Posted 2023-02-23

【中文标题】使用 Angular UI Router 渲染组件

【英文标题】：Rendering a component with Angular UI Router

【发布时间】：2016-12-18 06:56:22

【问题描述】：

当我将 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>' 来完成的。

【参考方案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