Angular2初始化和销毁​​组件

Question

开发人员。 <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> 

Answer 1

更新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的值添加/删除子项。