ng-template和ng-container的巢狀使用
原始碼:
<h4>Jerry: {{position}}</h4>
<div *ngIf="components[0]">
<h5>Component uid: {{ components[0].uid }}</h5>
<h6>Type code: {{ components[0].typeCode }}</h6>
</div>
<h4>end</h4>
<ng-template
[cxOutlet]="position"
[cxOutletContext]="{ components$: components$ }"
>
<div>before ng-template</div>
<ng-template
*ngFor="let component of components"
[cxOutlet]="component.flexType"
[cxOutletContext]="{ component: component }"
[cxOutletDefer]="getComponentDeferOptions(component.flexType)"
(loaded)="isLoaded($event)"
>
<div>before ng-container,type: {{ component.flexType}}</div>
<ng-container [cxComponentWrapper]="component"></ng-container>
<div>after ng-container</div>
</ng-template>
<div>after ng-template</div>
</ng-template>
相關文章
- 一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的區別AI
- javafx和swing巢狀使用的方法Java巢狀
- iOS block巢狀block中weakify的使用iOSBloC巢狀
- 使用swiper.js建立巢狀的swiperJS巢狀
- Angular 裡使用巢狀 Form 的步驟Angular巢狀ORM
- ViewPager巢狀fragment簡單使用Viewpager巢狀Fragment
- python 字典和列表巢狀用法Python巢狀
- Python的if else 巢狀 和forin while 迴圈Python巢狀While
- js中的函式巢狀和閉包JS函式巢狀
- Fragment巢狀FragmentViewPager 正常使用姿勢Fragment巢狀Viewpager
- element-ui的----el-form表單校驗巢狀表單校驗(表單多層巢狀)+el-table和el-form巢狀使用表單校驗UIORM巢狀
- 物件導向 成員和巢狀物件巢狀
- 淺談Vue-router使用方法及動態路由和巢狀路由的使用Vue路由巢狀
- Python的if語句多層巢狀怎麼使用Python巢狀
- setTimeout和箭頭函式巢狀中的this指向函式巢狀
- Less使用詳解(v3.9.0)—巢狀和父選擇器&巢狀
- html的巢狀規則HTML巢狀
- Vue中的巢狀路由Vue巢狀路由
- es中如何使用巢狀物件查詢巢狀物件
- 內聯和巢狀名稱空間巢狀
- 02-if巢狀和三目運算子巢狀
- 列表巢狀操作巢狀
- vue路由巢狀Vue路由巢狀
- 小程式巢狀H5的方式和技巧(二)巢狀H5
- Confluence 6 啟用巢狀使用者組巢狀
- 巢狀滾動設計和原始碼分析巢狀原始碼
- golang的巢狀事務管理Golang巢狀
- JavaScript中if巢狀assert的方法JavaScript巢狀
- vue的元件巢狀關係Vue元件巢狀
- 008. vue元件的巢狀Vue元件巢狀
- Python中如何避免字典和元組的多重巢狀的方法Python巢狀
- SCSS 巢狀屬性CSS巢狀
- SCSS 巢狀規則CSS巢狀
- 展開巢狀列表巢狀
- Locust 任務巢狀巢狀
- Oracle 巢狀表(轉)Oracle巢狀
- 巢狀類遞迴巢狀遞迴
- vue(19)巢狀路由Vue巢狀路由