javascript - Angular ui-router 根据路由参数渲染不同的组件

Question

使用 Angular UI Router，我尝试根据 $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

如果您不向组件传递任何数据，我认为您可以执行如下操作。

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

<小时/>

另一种方法是您可以为每个章节维护单独的模板并具有一些 URL 约定。此后，您可以使用 component 的 templateUrl 函数或带有 src 的 ng-include 指令来渲染这些模板。 p>