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
原文：http://www.cnblogs.com/Answer1215/p/7106909.html