以下是我 app.component.html 內容：
<main>
<router-outlet name="head"></router-outlet>
<router-outlet name="navbar"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>
<jqxNotification #mainNotification [theme]="'bootstrap'"
[width]="'auto'" [height]="'auto'" [opacity]="1.0"
[browserBoundsOffset]="16">
<div id="mainNotifyMessage" class="font18"></div>
</jqxNotification>
<jqxLoader #loader>
</jqxLoader>
</main>
我的 app.component.ts
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {NotificationService} from "./_services/notification.service";
import {jqxLoaderComponent} from "jqwidgets-ng/jqxloader";
import {jqxNotificationComponent} from "jqwidgets-ng/jqxnotification";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
host: {
'(window:resize)': 'onResize($event)'
}
})
export class AppComponent implements AfterViewInit{
@ViewChild('mainNotification', {static: false}) mainNotification: jqxNotificationComponent;
@ViewChild('loader', {static: false}) loader: jqxLoaderComponent;
constructor(
private notificationService: NotificationService
) { }
ngAfterViewInit(): void {
if (!this.notificationService.isInitialized()) {
this.notificationService.initAll(this.mainNotification, this.loader);
}
}
onResize(event){
console.log("window resize event happens!");
event.target.innerWidth; // window width
}
}
我的畫面有數個 router-outlet 。我想做的是，當 window 有 resize 時，我想把我的 router-outlet (沒有 name的那個)中的元件裡某個 div 跟著放大或縮小。
我現在已經做好了 windows resize 的 event，但要如何取得下列資訊？
- 在 router-outlet 裡執行的 componet
- (接1)，該 router-outlet (或說該 component)所佔用的高度
- router-outlet (name=“navbar” ) 所佔用的高度
- window (或說是 document, body)目前的高度
以上，懇請賜教。謝謝幫忙