使用 Angular 1.5 组件的嵌套路由中的相对视图

Posted 2023-02-23

【中文标题】使用 Angular 1.5 组件的嵌套路由中的相对视图

【英文标题】：relative views in a nested route using Angular 1.5 components

【发布时间】：2017-01-23 17:06:44

【问题描述】：

我在嵌套路由中使用相对命名视图时遇到问题：

Angular 1.5.8 & angular-ui-router 1.0.0-beta.2

在下面的“layout.dashboard”状态中，我的视图对象带有键“certs”和“activity”。每个视图都链接到一个超级基本组件，其中包含一个空控制器和一个模板，其中包含一些要显示的简单文本....但是，我的视图对象中的组件没有显示。

根据文档here，我应该可以去：

<div ui-view='certs'></div> //Should be in parent -> dashboard.tmpl.html

但是这些组件都没有出现。我哪里错了？

app.js

$stateProvider
    .state('login', 
    url: '/login',
        param: error: null,
        component: 'login'
    )
    .state('layout', 
        abstract: true,
        component: 'layout',
        resolve: 
            User: function (AuthorizeService, $state) 
                    return AuthorizeService.isAuthorized()
                            .catch(function()
                                 $state.go('login', error: 'Please Login');
                            );
            ,
             Organizations : function(OrganizationService, UserService)
                 return OrganizationService.getOrgs().then(function(result)
                     OrganizationService.setCurrentOrg(result.data[0]);
                     return result.data;
                 )
             
        
    )
    .state('layout.dashboard', 
        url: '/dashboard',
        component : 'dashboard',
        resolve : 
            certifications: function (OrganizationService) 
                return OrganizationService.getCurrentOrg().then(function(result) 
                    return OrganizationService.getCertifications(result);
                );
            
        ,
        /******THESE ARE NOT DISPLAYING*********/
        views :  
            certs :  component: 'certificationsList' ,
            activity:  component: 'activityList' 
        
    )

layout.tmpl.html

<div class="container-fluid">

        <div class='header-bar'>

            <div class='header-bar_logo'>
                <a ui-sref="layout"><img src='assets/images/app-logo.png' alt='' /></a>
            </div>

            <div class='header-bar_user'>
                <div class="avatar">
                    <img ng-src="dash.user.avatar" class="profile-photo">
                </div>
                <div class="info">
                    <h4 class="name">dash.user.name</h4>
                    <p>dash.user.points</p>
                </div>
            </div>

        </div>

        <section id="main">
            <div class='main-sidebar'>

                <!-- Browse Certifications, Browse Courses , Account, -->
                <div ui-sref="layout.dashboard" ui-sref-active="active" class="main-menu-item">
                    <h3><i class="fa fa-certificate"></i>Certifications</h3>
                </div>
                <div ui-sref="dashboard.courses" ui-sref-active="active" class="main-menu-item">
                    <h3><i class="fa fa-book"></i>Courses</h3>
                </div>
                <div ui-sref="dashboard.users" ui-sref-active="active" ng-class="'disabled': !dash.isAdmin()" class="main-menu-item">
                    <h3><i class="fa fa-user"></i>Users</h3>
                </div>
                <div ui-sref="dashboard.analytics" ui-sref-active="active" ng-class="'disabled': !dash.isAdmin()" class="main-menu-item">
                    <h3><i class="fa fa-line-chart"></i>Analytics</h3>
                </div>
                <div ui-sref="dashboard.account" ui-sref-active="active" class="main-menu-item">
                    <h3><i class="fa fa-cog"></i>Account</h3>
                </div>

            </div>

            <div class='main-content-wrapper'>
                <alert-list></alert-list>
                <ui-view></ui-view>
            </div>
        </section>

    </div>

dashboard.tmpl.html

    <div class="dashboard-wrapper">
        <h1>Overview</h1>
        <div class="header">
            <div class="header-content">
            <h3>Header News Feed?</h3>
            </div>
        </div>
        <div class="dashboard-content">
            <div class="left-column">
                <div ui-view="certs"></div>
            </div>
            <div class="right-column">
                <div ui-view="activity"></div>
            </div>
        </div>
    </div>

【参考方案1】：

问题解决了。在文档的最后，有这一点。这需要更多的关注，所以这里是：

如果一个状态有一个视图对象，任何状态级视图属性（Ng1ViewDeclaration）都会被忽略。因此，如果在视图对象中声明了状态的任何视图，则必须在视图对象中定义该状态的所有视图。状态声明不得包含以下任何字段：

组件 绑定 解析为 模板 模板网址 模板提供者 控制器 控制器作为 controllerProvider

换句话说，这在 NOT Valid:

 .state('layout.dashboard', 
    url: '/dashboard',
    component : 'dashboard',
    resolve : 
        certifications: function (OrganizationService) 
            return OrganizationService.getCurrentOrg().then(function(result) 
                return OrganizationService.getCertifications(result);
            );
        
    ,
    /*****Because a view object exists, component is ignored*****/
    views :  
        certs :  component: 'certificationsList' ,
        activity:  component: 'activityList' 
    
)

解决方法如下：

    .state('layout.dashboard', 
        url: '/dashboard',
        resolve : 
            certifications: function (OrganizationService) 
                return OrganizationService.getCurrentOrg().then(function(result) 
                    return OrganizationService.getCertifications(result);
                );
            
        ,
        views :
                
                "" : component: 'dashboard',
                "[e-mail]" :  component: 'certificationsList' ,
                "[e-mail]" :  component: 'activityList' 
                
    )