首页 > 代码库 > [Angular] Learn Angular Multi-Slot Content Projection
[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"
[Angular] Learn Angular Multi-Slot Content Projection
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。