javascript - 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 添加它(或类似)在 TabComponent 中。

另一种选择是

<tab number="{{event?.boats?.length}}" title="{{'CATEGORY.BOATS' | translate}}" icon="directions_boat" #tab>
    <boat *ngIf="tab.visible" [data]=event?.boats></boat>

其中 TabComponent 提供属性 visible子进程根据 visible 的值来添加/删除自己.