ファイル

src/app/component/root/root.component.ts

実装

OnInit OnDestroy

メタデータ

selector app-root
styleUrls ./root.component.css
templateUrl ./root.component.html

インデックス

プロパティ
メソッド
ホストリスナー

コンストラクタ

constructor(router: Router, dataService: DataService, stateService: StateService, scrollService: ScrollService, changeDetectorRef: ChangeDetectorRef, bottomSheet: MatBottomSheet)
パラメータ :
名前 Type オプション
router Router いいえ
dataService DataService いいえ
stateService StateService いいえ
scrollService ScrollService いいえ
changeDetectorRef ChangeDetectorRef いいえ
bottomSheet MatBottomSheet いいえ

HostListeners

window:beforeunload
引数 : '$event'
window:beforeunload(e: Event)

メソッド

clickOp
clickOp(e: Event)
パラメータ :
名前 Type オプション
e Event いいえ
戻り値 : void
Async favorite
favorite()
戻り値 : any
Async init
init()
戻り値 : any
newSearch
newSearch()
戻り値 : void
ngOnDestroy
ngOnDestroy()
戻り値 : void
ngOnInit
ngOnInit()
デコレータ :
@Catch()
戻り値 : void
resize
resize(e: Event)
パラメータ :
名前 Type オプション
e Event いいえ
戻り値 : void
search
search()
戻り値 : void
setting
setting()
戻り値 : void

プロパティ

componentRef
Type : Component
デコレータ :
@ViewChild('outret')
Public dataService
Type : DataService
isQue
既定値 : false
isUpdate
既定値 : false
isWait
既定値 : true
Public router
Type : Router
Public scrollService
Type : ScrollService
Public stateService
Type : StateService
subscription
Type : Subscription
import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {DataService} from '../../service/data.service';
import {Router} from '@angular/router';
import {MyEvent, StateService} from '../../service/state.service';
import {ListComponent} from '../list/list.component';
import {ScrollService} from '../../service/scroll.service';
import {Subscription} from 'rxjs';
import {MatBottomSheet, MatProgressSpinner} from '@angular/material';
import {SettingComponent} from '../setting/setting.component';
import {Catch} from '../../class/log.class';

// import {LIST_MODE} from "../app.config";
// import {UtilityService} from "../service/utility.service";

@Component({
    selector: 'app-root',
    templateUrl: './root.component.html',
    styleUrls: ['./root.component.css']
})
export class RootComponent implements OnInit, OnDestroy {
    @ViewChild('outret') componentRef: Component;
    //isWati=tureの間はデータバインドを待機
    isWait = true;
    subscription: Subscription;
    isUpdate = false;
    isQue = false;

    constructor(
        public router: Router,
        public dataService: DataService,
        public stateService: StateService,
        public scrollService: ScrollService,
        private changeDetectorRef: ChangeDetectorRef,
        private bottomSheet: MatBottomSheet
    ) {
        this.subscription = this.stateService.subscribe(
            MyEvent.DB_UPDATE, () => {
                this.isUpdate = true;
                setTimeout(() => {
                    this.isUpdate = false;
                }, 2000);
            });
    };


    //画面表示前の初期化
    @Catch()
    ngOnInit() {
        this.init();
    }

    async init() {
        //設定情報読み込み
        this.stateService.restoreState();

        let res = await this.dataService.init();

        this.isWait = false;
        this.router.navigate(['/search']);
    }

    async favorite() {
        this.router.navigate(['/favorite']);
    }

    //条件を変えて検索メニュー
    search() {
        this.router.navigate(['/search']);
    }

    //新規検索メニュー
    newSearch() {
        this.stateService.state.genres = [];
        this.stateService.state.areas = [];
        this.stateService.state.selectedKeys = [];
        this.router.navigate(['/search']);
    }

    //設定メニュー
    setting() {
        this.bottomSheet.open(SettingComponent);
    }


    //マウスクリックイベント
    clickOp(e: Event) {
        if (!this.stateService.state.setting.modern.value) {
            console.log('@@@ mouse click');
            this.isQue = true;
            setTimeout(() => {
                this.isQue = false;
            }, 2000);
        }
    }

    //ブラウザが閉じるイベント
    @HostListener('window:beforeunload', ['$event'])
    beforeUnload(e: Event) {
        console.log('@@@before unload');
        this.stateService.saveState();
    }

    //スマートフォンで画面の縦横回転
    resize(e: Event) {
        console.log('@@@ window resize');
        this.stateService.publish(MyEvent.RESIZE);
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

}
<div (click)="clickOp($event)">
<div
  *ngIf="isWait"
  style="display:flex;width:100%;height:100% ;align-items:center;justify-content:center;">
  起動中....
</div>

<div
  *ngIf="!isWait"
>
  <!--ヘッダ-->
  <mat-toolbar
    color="primary"
    style="position:fixed;top:0;left:0;height:56px;width: 100%; max-width:1024px; z-index: 2;"
  >
    <button mat-icon-button
            [matMenuTriggerFor]="menu"
            color="accent">
      <mat-icon>menu</mat-icon>
    </button>
    <!--ヘッダータイトル-->
    <h1>観光情報検索</h1>
    <div style="margin:auto 0 auto auto;display:flex; align-items: center;">

      <!--<mat-icon  *ngIf="stateService.state.isEdit">-->
         <!--edit-->
         <!--</mat-icon>-->
      <!--<span *ngIf="stateService.state.isReadyOffline">-->
        <!--PWA-->
      <!--</span>-->
      <mat-icon *ngIf="isUpdate" class="spin">
        autorenew
      </mat-icon>
      <span *ngIf="stateService.state.setting.prefetch.value">
        Pre
      </span>
      <span *ngIf="stateService.docCount>0">
       {{" "+stateService.docCount}}件
      </span>
    </div>
    <mat-menu #menu="matMenu">

      <button mat-menu-item
              *ngIf="router.url !=='/search' "
              (click)="newSearch()">
        <span>新規検索</span>
      </button>

      <button mat-menu-item
              *ngIf="router.url !=='/search'"
              (click)="search()">
        <span>再検索</span>
      </button>

      <button mat-menu-item
              *ngIf="router.url !=='/favorite' "
              (click)="favorite()">
        <span>お気に入り</span>
      </button>

      <button mat-menu-item
              *ngIf="router.url !=='/setting' "
              (click)="setting()">
        <span>設定</span>
      </button>

    </mat-menu>

  </mat-toolbar>

  <!--待ち受け背景-->
  <div
    *ngIf="isQue"
    class="darkBackground"
  ></div>

  <!--待ち受けアニメーション-->
  <div *ngIf="isQue"
style="z-index:2;height:10rem;width:10rem;position:
absolute;top:10rem;right:calc(50% - 5rem);" color="Warn">
    <mat-progress-spinner
      mode="indeterminate"></mat-progress-spinner>
  </div>

  <div style="position:absolute;top:56px;left:0;width: 100%; max-width:1024px; ">
    <router-outlet #outlet></router-outlet>
  </div>

</div>

</div>

./root.component.css

.spin{
  animation: spin 1.5s linear infinite;
  color:white;
}

@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.darkBackground {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.5;
  z-index: 1;
  max-width: 1024px;
}
凡例
HTML 要素
コンポーネント
HTML と directed を組み合わせて利用

result-matching ""

    該当なし ""