Угловой ui-router рендеринг различных компонентов на основе параметров маршрута

Question

Использование углового 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

Как предложил Панкадж Паркар в своем ответе, здесь используется функция шаблона.

С нескольких настройками, я смог добиться загрузок правильного компонента, основанного на $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.