zoukankan      html  css  js  c++  java
  • [Angular] Learn Angular Multi-Slot Content Projection

    Now for au-modal component, we pass in tow component though contenct projection:

      <au-modal
        class="auth-modal"
        #modal
        *auModalOpenOnClick="[loginButton, signUpButton]"
        [closeOnClickOutside]="true"
        [closeOnEsc]="true">
        <i class="fa fa-times" (click)="modal.close()"></i>
        <au-tab-panel>
           <!-- modal body--> 
        </au-tab-panel>
      </au-modal> 

    One is 'au-tab-panel' which contains all the content body for modal. Another is 'i' tag, repersent a close icon.

    Now both are passed in though content projection, so au-modal component, we need to know how to project two components into correct places.

    au-modal component:

    <div class="modal-overlay" (click)="onClick()">
    
      <div class="modal-body" (click)="cancelCloseModal($event)">
    
        <div class="close-icon">
          <ng-content select="i"></ng-content>
        </div>
    
        <ng-container *ngIf="body; else projectionBody">
          <ng-container *ngTemplateOutlet="body"></ng-container>
        </ng-container>
    
        <ng-template #projectionBody>
          <ng-content></ng-content>
        </ng-template>
    
      </div>
    
    </div>

    Here using 'select' attr for ng-content, it will take the projection body with the correct selector. In this case, is 'i' tag.

    The rest content which don't have any selector will goes into:

        <ng-template #projectionBody>
          <ng-content></ng-content>
        </ng-template>

    And this ng-template won't shows up until:

    *ngIf="body; else projectionBody"
  • 相关阅读:
    Redis集群搭建步骤
    JS性能优化
    javaweb中实现在线人数统计
    tomcat在linux中启动慢的解决方案
    Redis高可用架构
    bjpowernode课程体系及题库
    java 相关
    码农翻身全年文章精华
    Spring源码深度解析
    PHPSTROM快捷键备份
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7106909.html
Copyright © 2011-2022 走看看