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巢狀
- iterate的巢狀使用巢狀
- PLSQL Language Referenc-巢狀表-巢狀表和陣列間的重要區別(正確地使用巢狀表)SQL巢狀陣列
- 巢狀動畫如何使用巢狀動畫
- 巢狀使用 datalist (轉)巢狀
- 程式碼的縮排和巢狀巢狀
- Repeater中巢狀使用Repeater巢狀
- 集合的巢狀巢狀
- 盒子的巢狀巢狀
- LESS巢狀中的Mixins和classes巢狀
- 使用swiper.js建立巢狀的swiperJS巢狀
- iOS block巢狀block中weakify的使用iOSBloC巢狀
- Angular 裡使用巢狀 Form 的步驟Angular巢狀ORM
- SQl CASE 語句的巢狀使用方式SQL巢狀
- ViewPager巢狀fragment簡單使用Viewpager巢狀Fragment
- oracle 巢狀表 索引表 使用Oracle巢狀索引
- 集合框架-集合的巢狀遍歷(HashMap巢狀HashMap)框架巢狀HashMap
- 集合框架-集合的巢狀遍歷(HashMap巢狀ArrayList)框架巢狀HashMap
- 集合框架-集合的巢狀遍歷(ArrayList巢狀HashMap)框架巢狀HashMap
- 集合框架-集合的巢狀遍歷(多層巢狀)框架巢狀
- js中的函式巢狀和閉包JS函式巢狀
- java複雜奇葩的巢狀類和介面Java巢狀
- python 字典和列表巢狀用法Python巢狀
- 物件導向 成員和巢狀物件巢狀
- Fragment巢狀FragmentViewPager 正常使用姿勢Fragment巢狀Viewpager
- DataGrid中巢狀使用Repeater (轉)巢狀
- 關於MySQL遊標的巢狀使用MySql巢狀
- less巢狀巢狀
- Datalist巢狀巢狀
- protobuf 中的巢狀訊息的使用 主要對set_allocated_和mutable_的使用巢狀
- element-ui的----el-form表單校驗巢狀表單校驗(表單多層巢狀)+el-table和el-form巢狀使用表單校驗UIORM巢狀
- 淺談Vue-router使用方法及動態路由和巢狀路由的使用Vue路由巢狀
- Python的if else 巢狀 和forin while 迴圈Python巢狀While
- android listView巢狀gridview的使用心得AndroidView巢狀
- Less使用詳解(v3.9.0)—巢狀和父選擇器&巢狀
- html的巢狀規則HTML巢狀
- 02-if巢狀和三目運算子巢狀