Angular UI路由器根据路由参数呈现不同的组件

Question

使用Angular UI路由器，我试图根据$state.params值呈现不同的组件，但我找不到干净的方式来做到这一点。

我想出了一个可行的解决方案已经（有一些ES2015花式），但是，从最佳的远：

/* ----- chapter/chapter.controller.js ----- */ 
class ChapterController { 

    constructor($state) { 
    this.$state = $state; 
    this.chapterNb = this.$state.params.chapterNb; 
    } 

} 

ChapterController.$inject = ['$state']; 

export default ChapterController; 

/* ----- chapter/chapter.controller.js ----- */ 
import controller from './chapter.controller'; 

const ChapterComponent = { 
    controller, 
    template: ` 
    <chapter-01 ng-if="$ctrl.chapterNb === 1"></chapter-01> 
    <chapter-02 ng-if="$ctrl.chapterNb === 2"></chapter-02> 
    ` // and more chapters to come... 
}; 

export default ChapterComponent; 

/* ----- chapter/index.js ----- */ 
import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 

import ChaptersComponent from './chapters.component'; 
import ChaptersMenu from './chapters-menu'; 
import Chapter from './chapter'; 

const chapters = angular 
    .module('chapters', [ 
    uiRouter, 
    ChaptersMenu, 
    Chapter 
    ]) 
    .component('chapters', ChaptersComponent) 
    .config($stateProvider => { 
    'ngInject'; 
    $stateProvider 
     .state('chapters', { 
     abstract: true, 
     url: '/chapters', 
     component: 'chapters' 
     }) 
     .state('chapters.menu', { 
     url: '/menu', 
     component: 'chaptersMenu' 
     }) 
     .state('chapters.chapter', { 
     url: '/{chapterNb:int}', 
     component: 'chapter' 
     }); 
    }) 
    .name; 

export default chapters; 

的一点是，每个<chapter-0*>成分是非常不同的，这就是为什么他们都对应自己模板。 我想找到一种方法来自动引用对应于$state.params.chapterNb的章节组件，而不必为每个组件编写这些ng-if。

有什么办法可以简化它吗？或者为此目的可能有一个特定的功能？

Answer 1

正如Pankaj Parkar在他的回答中所建议的那样，使用模板函数在这里有所帮助。

有了一些调整，我已经能够实现加载基于$state.params正确的组件，所以这里是我的解决方案，备案（看的第一篇文章给别人的文件涉及的）：

import controller from './chapter.controller'; 

const ChapterComponent = { 
    controller, 
    template: ($state) => { 
    'ngInject'; 
    return ` 
     <chapter-0${$state.params.chapterNb}></chapter-0${$state.params.chapterNb}> 
    `; 
    } 
}; 

export default ChapterComponent; 

Answer 2

我想你可以做下面的事情，如果你没有传递任何数据到组件。

const ChapterComponent = { 
    controller, 
    template: ($state) => { 
    return ['<chapter-', $state.chapterNb, '></chapter-', $state.chapterNb, '>'].join("") 
    } 
}; 

---

另一种方法是你可以为每一个chapter &单独的模板有一些URL约定。此后，您可以使用templateUrl函数component或ng-include指令使用src来渲染那些模板。