AngularJS中如何结合UI Router组件API使用ng-transclude？

核心思路是：transclude的配置是在你定义的组件本身里做的，而不是在UI Router的路由配置中。UI Router的组件API只是负责渲染你的组件，而组件的transclude能力是AngularJS组件本身的特性，两者完全可以配合使用。

我给你拆解下具体实现步骤，结合代码示例来说：

第一步：定义支持transclude的父组件 #

先把需要渲染的父组件配置好transclude选项，并在模板里留好插槽位置：

angular.module('yourApp')
.component('routeContainer', {
  // 开启单插槽transclude（如果是多插槽可以用对象形式，比如transclude: { sidebar: 'sidebarSlot' }）
  transclude: true,
  template: `
    <div class="route-wrapper">
      <h3>这是路由对应的父组件头部</h3>
      <!-- 子组件/内容会被渲染到这里 -->
      <div class="transclude-slot" ng-transclude></div>
    </div>
  `
});

// 随便定义一个子组件用来测试
angular.module('yourApp')
.component('embeddedChild', {
  template: `<p>我是通过ngTransclude传入的子组件内容</p>`
});

第二步：在UI Router路由中配置组件+传入transclude内容 #

UI Router的state配置里，我们可以通过template属性来使用父组件，并在父组件标签内部嵌套需要传入的子组件——这就是给transclude插槽传内容的方式：

angular.module('yourApp')
.config(function($stateProvider) {
  $stateProvider.state('yourSpecificRoute', {
    url: '/your-path',
    // 这里用template来使用父组件，并把要transclude的内容嵌套进去
    template: `
      <route-container>
        <embedded-child></embedded-child>
      </route-container>
    `
    // 注意：如果直接写component: 'routeContainer'而没有template，父组件的transclude插槽会是空的，因为没有传入任何内容
  });
});

关键知识点梳理 #

• UI Router的组件API并没有限制组件使用transclude，只是路由配置本身不负责设置transclude——那是组件自己的职责。
• 如果你需要多插槽transclude，只需要把组件的transclude配置改成对象形式，比如transclude: { header: '?headerSlot', content: 'mainContent' }，然后在模板里用ng-transclude="header"指定插槽，再在路由的template里用<header-slot>...</header-slot>传入对应内容即可。
• 这种方式完全符合UI Router推荐的组件API用法，不需要回到旧的template + controller配置方式。

内容的提问来源于stack exchange，提问作者user2954463