Angular 1.5带子DOM插槽组件：实现可复用内容切换包裹组件

嘿，我之前刚好在Angular 1.5里做过这种可复用的内容包裹组件，你的核心需求其实就是利用Angular的**内容嵌入（transclude）**特性来实现子内容的注入，同时结合属性绑定控制显示状态。下面给你一步步拆解实现方法：

Angular 1.5的组件系统天生支持transclude，它的作用就是把父页面中嵌套在组件标签里的内容，插入到组件模板的指定位置，完全不会覆盖组件本身的原有模板——这正好解决你“注入子内容且不覆盖原有模板”的问题。配合属性绑定来接收控制显示的状态值，就能实现动态切换子内容的显示/隐藏。

1. 定义可复用组件 #

首先创建你的包裹组件，关键是设置transclude: true，并绑定控制显示的输入属性：

angular.module('yourApp').component('contentWrapper', {
  bindings: {
    // '<' 表示单向绑定父组件/页面传入的状态值
    isVisible: '<'
  },
  transclude: true, // 开启内容嵌入
  template: `
    <div class="content-wrapper">
      <!-- 这里可以放组件自己的固定模板内容，比如标题、切换按钮等 -->
      <h3>我的包裹组件</h3>
      <!-- ng-transclude 标记子内容的插入位置 -->
      <div ng-show="$ctrl.isVisible" ng-transclude></div>
    </div>
  `
});

2. 在page.html中使用组件 #

在页面里直接嵌套你的子内容，同时传入控制显示的is-visible属性：

<!-- page.html -->
<content-wrapper is-visible="vm.showContent">
  <!-- 这里就是你要被包裹的子内容，会被注入到组件的ng-transclude位置 -->
  <div class="my-page-content">
    <p>这是页面里的具体内容</p>
    <button ng-click="vm.doSomething()">点击操作</button>
  </div>
</content-wrapper>

3. 控制显示状态 #

在页面的控制器里，只需要修改vm.showContent的值，就能触发组件切换子内容的显示：

angular.module('yourApp').controller('PageController', function() {
  var vm = this;
  vm.showContent = true; // 默认显示

  // 比如某个事件触发时切换状态
  vm.toggleContent = function() {
    vm.showContent = !vm.showContent;
  };
});

• 如果需要默认隐藏，可以在组件的$onInit钩子中设置默认值：

  controller: function() {
    var vm = this;
    vm.$onInit = function() {
      vm.isVisible = vm.isVisible !== undefined ? vm.isVisible : false;
    };
  }
  

• 想要平滑的显示/隐藏动画，可以给ng-show加上ng-animate，配合CSS过渡效果。

这样你的组件就完全可复用了——不管在哪个页面，只要嵌套子内容并传入控制状态，就能实现动态切换显示的效果。

内容的提问来源于stack exchange，提问作者Patrick W. McMahon