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"
  • 相关阅读:
    时间序列数据
    python--模块
    聚类模型
    数模写作
    分类问题
    图论的基本概念
    706. Design HashMap
    第七讲异方差、多重共线性、逐步回归
    187.Repeated DNA Sequences
    C语言堆内存的分配和使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7106909.html
Copyright © 2011-2022 走看看