ing

@overflow/commons/ui/directive/auto-height.directive.ts

@@ -6,6 +6,7 @@ import { Directive, AfterViewInit, Input, HostListener, ElementRef, ChangeDetect
   selector: '[of-auto-height]'
 })
 export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
+  @Input() key: string;
   @Input() footerElement = null;
 
   @HostListener('window:resize', ['$event'])
@@ -29,6 +30,10 @@ export class AutoHeightDirective implements OnInit, OnDestroy, AfterViewInit {
   ngOnDestroy(): void {
   }
 
+  onVisible(event) {
+    console.log('visibilitychange');
+  }
+
   /**
    * forceCalculate
    */

src/app/app.module.ts

@@ -25,7 +25,6 @@ import { SERVICES } from '../commons/service';
 
     AppRoutingModule,
     AppStoreModule,
-
   ],
   providers: [
     ...SERVICES,

src/commons/component/host-detail.component.html

@@ -70,7 +70,7 @@
     </p-tabPanel>
 
     <p-tabPanel header="Ports" *ngIf="host.portList">
-      <div of-auto-height>
+      <div of-auto-height key="2">
         <perfect-scrollbar>
           <ul class="key-value">
             <li *ngFor="let port of host.portList | sort: 'portNumber'">

src/commons/component/host-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core';
 
 import { of } from 'rxjs';
 import { map, catchError, take } from 'rxjs/operators';
@@ -17,7 +17,8 @@ import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.
 })
 export class HostDetailComponent implements OnChanges {
   @Input() host: Host;
-  @ViewChild(AutoHeightDirective) autoHeightDirective;
+
+  @ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
 
 
   pingWaiting: boolean;
@@ -75,7 +76,12 @@ export class HostDetailComponent implements OnChanges {
   }
 
   onTabViewChange($event) {
-    this.autoHeightDirective.forceCalculate();
+    const index = String($event.index);
+    this.autoHeightDirectives.map(item => {
+      if (item.key === index) {
+        item.forceCalculate();
+      }
+    });
   }
 
 }

src/commons/component/service-detail.component.html

@@ -46,7 +46,7 @@
     </p-tabPanel>
 
     <p-tabPanel header="Metadata" *ngIf="service.meta">
-      <div of-auto-height>
+      <div of-auto-height key="1">
         <perfect-scrollbar>
           <ul class="detail-content-meta-title">
             <li *ngFor="let key of service.meta | objectKeys">
@@ -105,8 +105,6 @@
         </p-table>
       </div>
 
-
-
     </p-tabPanel>
 
   </p-tabView>

src/commons/component/service-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, ViewChildren, QueryList } from '@angular/core';
 import { Service } from '@overflow/model/discovery';
 import { PingResult } from '@overflow/model/ping';
 import { ProbeService } from '../service/probe.service';
@@ -15,7 +15,7 @@ export class ServiceDetailComponent implements OnChanges {
 
   @Input() service: Service;
 
-  @ViewChild(AutoHeightDirective) autoHeightDirective;
+  @ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
 
 
   pingWaiting: boolean;
@@ -36,10 +36,6 @@ export class ServiceDetailComponent implements OnChanges {
     this.deadline = 1;
   }
 
-  onTabViewChange($event) {
-    this.autoHeightDirective.forceCalculate();
-  }
-
   ngOnChanges(simpleChanges: SimpleChanges): void {
     this.pingResult = null;
   }
@@ -75,4 +71,13 @@ export class ServiceDetailComponent implements OnChanges {
       .subscribe();
   }
 
+  onTabViewChange($event) {
+    const index = String($event.index);
+    this.autoHeightDirectives.map(item => {
+      if (item.key === index) {
+        item.forceCalculate();
+      }
+    });
+  }
+
 }

src/commons/component/zone-detail.component.html

@@ -17,34 +17,36 @@
   <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
 
     <p-tabPanel header="General">
-      <perfect-scrollbar>
+      <div of-auto-height key="0">
-        <ul class="key-value">
+        <perfect-scrollbar>
-          <li *ngIf="zone.iface">
+          <ul class="key-value">
-            Interface
+            <li *ngIf="zone.iface">
-            <span class="meta-value">{{zone.iface}}</span>
+              Interface
-          </li>
+              <span class="meta-value">{{zone.iface}}</span>
-          <li *ngIf="zone.mac">
+            </li>
-            Mac Address
+            <li *ngIf="zone.mac">
-            <span class="meta-value">{{zone.mac}}</span>
+              Mac Address
-          </li>
+              <span class="meta-value">{{zone.mac}}</span>
-          <li *ngIf="zone.metaIPType">
+            </li>
-            IP Version
+            <li *ngIf="zone.metaIPType">
-            <span class="meta-value">{{zone.metaIPType.key}}</span>
+              IP Version
-          </li>
+              <span class="meta-value">{{zone.metaIPType.key}}</span>
-          <li *ngIf="zone.network">
+            </li>
-            Network
+            <li *ngIf="zone.network">
-            <span class="meta-value">{{zone.network}}</span>
+              Network
-          </li>
+              <span class="meta-value">{{zone.network}}</span>
-          <li *ngIf="zone.network">
+            </li>
-            IP Range
+            <li *ngIf="zone.network">
-            <span class="meta-value">{{ipRange}}</span>
+              IP Range
-          </li>
+              <span class="meta-value">{{ipRange}}</span>
-        </ul>
+            </li>
-      </perfect-scrollbar>
+          </ul>
+        </perfect-scrollbar>
+      </div>
     </p-tabPanel>
 
     <p-tabPanel header="Hosts">
-      <div of-auto-height>
+      <div of-auto-height key="1">
         <perfect-scrollbar>
           <ul class="key-value">
             <li *ngFor="let host of zone.hostList | ipSort: 'address'">
@@ -57,7 +59,5 @@
         </perfect-scrollbar>
       </div>
     </p-tabPanel>
-
   </p-tabView>
-
 </div>

src/commons/component/zone-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core';
 import { Zone, Host } from '@overflow/model/discovery';
 import { AutoHeightDirective } from '@overflow/commons/ui/directive/auto-height.directive';
 
@@ -14,7 +14,7 @@ export class ZoneDetailComponent implements OnInit {
   @Input() zone: Zone;
   @Output() otherHostSelect = new EventEmitter<Host>();
 
-  @ViewChild(AutoHeightDirective) autoHeightDirective;
+  @ViewChildren(AutoHeightDirective) autoHeightDirectives: QueryList<AutoHeightDirective>;
 
   ipRange: string;
 
@@ -36,7 +36,12 @@ export class ZoneDetailComponent implements OnInit {
   }
 
   onTabViewChange($event) {
-    this.autoHeightDirective.forceCalculate();
+    const index = String($event.index);
+    this.autoHeightDirectives.map(item => {
+      if (item.key === index) {
+        item.forceCalculate();
+      }
+    });
   }
 
 }

yarn.lock

@@ -790,6 +790,12 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://nexus.loafle.net/repository/npm-all/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+angular-page-visibility@^6.1.3:
+  version "6.1.3"
+  resolved "https://nexus.loafle.net/repository/npm-all/angular-page-visibility/-/angular-page-visibility-6.1.3.tgz#d2cfaa5a73aec195f393be03cf9fc45f9b293e16"
+  dependencies:
+    tslib "^1.9.0"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://nexus.loafle.net/repository/npm-all/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -6498,6 +6504,10 @@ rx@^4.1.0:
   version "4.1.0"
   resolved "https://nexus.loafle.net/repository/npm-all/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
 
+rxjs-compat@^6.3.3:
+  version "6.3.3"
+  resolved "https://nexus.loafle.net/repository/npm-all/rxjs-compat/-/rxjs-compat-6.3.3.tgz#2ab3b9ac0dac0c073749d55fef9c03ea1df2045c"
+
 rxjs@^6.0.0, rxjs@^6.2.2:
   version "6.3.3"
   resolved "https://nexus.loafle.net/repository/npm-all/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"