[Angular] Learn Angular Multi-Slot Content Projection
Angular content multi Learn slot
2023-09-14 08:59:18 时间
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"
相关文章
- 监听Sms.Content_URI而不是Sms.Inbox.CONTENT_URI
- [Angular] Modify User Provided UI with Angular Content Directives
- [Angular] Performance Caching Policy - Cache First, Network Last
- [Angular] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular] Configurable Angular Components - Content Projection and Input Templates
- [Angular] How to styling ng-content
- [Angular] Create dynamic content with <tempalte>
- [Angular 2] Handling Clicks and Intervals Together with Merge
- [Angular] New async 'as' syntax and ngIf.. else
- [Angular] Learn Angular Multi-Slot Content Projection
- [Angular 2] Refactoring mutations to enforce immutable data in Angular 2
- [AngularJS] Consistency between ui-router states and Angular directives
- [AngularJS] Angular 1.3 ng-model-options - getterSetter
- Angular 基于自定义指令的内容投影 content projection 问题的单步调试
- 解决 Angular 官网下载的 library Schematics build 出错的办法
- 通过一个简单的例子学习Angular Injection Token工作原理
- 在Angular应用的child Component里同时使用@Input和@Output
- Nginx报错Mixed Content: The page was loaded over HTTPS, This content should also be served over https