[英]Angular2 Init and destroy component
開發人員。 <ng-content></ng-content>
。 我創建了一個組件,它看起來像這樣。 但是組件<boat></boat>
<competitorEvent ></competitorEvent >
和<waypoint ></waypoint>
初始化一次,並且不會被破壞
<tabs> <tab number="{{event?.boats?.length}}" title="{{'CATEGORY.BOATS' | translate}}" icon="directions_boat"> <boat [data]=event?.boats></boat> </tab> <tab number="{{event?.competitors?.length}}" title="{{'CATEGORY.COMPETITOR' | translate}}" icon="people"> <competitorEvent [data]="event?.competitors"></competitorEvent> </tab> <tab number="{{event?.wayPoints?.length}}" title="{{'CATEGORY.WAYPOINTS' | translate}}" icon="place"> <waypoint [distances]="event?.distances"></waypoint> </tab> </tabs>
tabs.ts @Component({ selector: "tabs", template: ` <div class="ui-g"> <ng-container *ngFor="let tab of tabs" > <div class="ui-g-12 ui-md-2 ui-lg-2" (click)="selectTab(tab)"> <a> <div class="ui-g card colorbox colorbox-1" [class.active]="tab.pressed"> <div class="ui-g-4" *ngIf="tab.icon"> <i class="material-icons">{{tab.icon}}</i> </div> <div class="ui-g-8"> <div class="colorbox-name truncate">{{tab.title}}</div> <div class="colorbox-count">{{tab.number}}</div> </div> </div> </a> </div> </ng-container> </div> <ng-content ></ng-content> ` })
tab.ts @Component({ selector: "tab", template: ` <ng-template class="container" *ngIf="pressed"> <ng-content *ngIf="pressed"></ng-content> </ng-template> ` })
在此代碼中,單擊時每個組件每次都會啟動組件生命周期
<div [ngSwitch]="tab"> <div *ngSwitchCase="1"> <boat [data]=event?.boats></boat> </div> <div *ngSwitchCase="2"> <competitorEvent [data]="event?.competitors"></competitorEvent> </div> <div *ngSwitchCase="3"> <waypoint [distances]="event?.distances"></waypoint> </div> </div>
更新Angular 5
ngOutletContext
重命名為ngTemplateOutletContext
另請參見https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
原版的
<ng-content *ngIf="pressed"></ng-content>
不會創建或破壞通過它們投影的內容,而只是顯示(投影到)子內容的標記。
內容保留在實際添加的組件中。
要獲得更多控制,您可以傳遞<template><boat></boat></template>
並使用ngTemplateOutlet
(或類似方法)添加它。
另一種選擇是
<tab number="{{event?.boats?.length}}" title="{{'CATEGORY.BOATS' | translate}}" icon="directions_boat" #tab>
<boat *ngIf="tab.visible" [data]=event?.boats></boat>
其中TabComponent提供了visible
的屬性,該子項用來根據visible
的值添加/刪除子項。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.