首页 > 代码库 > [Angular] Learn Angular Multi-Slot Content Projection

[Angular] Learn Angular Multi-Slot Content Projection

2024-10-15 16:27:02   216人阅读

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"

 

[Angular] Learn Angular Multi-Slot Content Projection


联系
我们