angular 中ng-content的巧妙使用

最近在写关于用户编辑的页面，这个页面有好多个编辑的区域，但是每个编辑区域都有四种style相似的状态。考虑到代码的复用，我们打算用ng-content来封装这四种状态

• inactive状态，就是到这个页面啥都没做的情况下出现的页面

image

• hover状态，就是hover到这个页面出现的样子

image

• active状态，编辑的状态

image

• preview状态

image

 ng-content封装的app-editable-box 组件
 
 // 这个是可以编辑的状态，这里包含前三种状态
 <div *ngIf="mode === 'edit'">
 // 这是是可编辑模式下，啥都没做时用来盛放相关content的地方
  <div class="inactive-box" *ngIf="editStatus === 'inactive'">
    <ng-content select="[edit-mode-inactive-template]">//[edit-mode-inactive-template]这个是与调用这个组件相呼应的地方
    </ng-content>
    <i class="fa fa-pencil inactive-box-pencil" aria-hidden="true" (click)="mode = 'edit'"></i>
    
    //这个是可编辑模式下，hover到编辑区的时用来盛放相关content的地方
    <div class="edit-mode-inactive-hover" *ngIf="haveHoverAction">
      <div class="hover-mask">
      </div>
      <div class="hover-content">
        <ng-content select="[edit-mode-inactive-hover-template]">
        </ng-content>
      </div>
    </div>
  </div>

// 这个是可编辑模式下，编辑的时候用来盛放相关content的地方
  <div *ngIf="editStatus === 'active'" class="active-box">
    <ng-content select="[edit-mode-active-template]">
    </ng-content>
  </div>
</div>

//这个是preview 状态
<div *ngIf="mode === 'preview'">
  <ng-content select="[preview-mode-template]">
  </ng-content>
</div>



//如何去使用这个封装好的容器
//调用这个app-editable-box 组件

<app-editable-box [mode]="mode">
  <div edit-mode-inactive-template> //edit-mode-inactive-template这个就是与封装组件的相对应的地方
    //用来写第一个状态下的HTML结构
  </div>

  <div edit-mode-inactive-hover-template>
    //用来写hover状态下的HTML结构
  </div>

  <div edit-mode-active-template>
    //用来写edit状态下的HTML结构
  </div>

  <div preview-mode-template class="preview-company-desc">
    //用来写preview状态下的HTML结构
  </div>
</app-editable-box>

希望这篇文章对你有帮助 🙂