[web-app] ng-alain模版工程初始化

web-app/src/app/layout/basic/widgets/fullscreen.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
+import * as screenfull from 'screenfull';
+
+@Component({
+  selector: 'header-fullscreen',
+  template: `
+    <i nz-icon [nzType]="status ? 'fullscreen-exit' : 'fullscreen'"></i>
+    {{ (status ? 'menu.fullscreen.exit' : 'menu.fullscreen') | i18n }}
+  `,
+  host: {
+    '[class.d-block]': 'true'
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HeaderFullScreenComponent {
+  status = false;
+  private get sf(): screenfull.Screenfull {
+    return screenfull as screenfull.Screenfull;
+  }
+
+  @HostListener('window:resize')
+  _resize(): void {
+    this.status = this.sf.isFullscreen;
+  }
+
+  @HostListener('click')
+  _click(): void {
+    if (this.sf.isEnabled) {
+      this.sf.toggle();
+    }
+  }
+}