src/app/component/root/root.component.ts
selector | app-root |
styleUrls | ./root.component.css |
templateUrl | ./root.component.html |
プロパティ |
|
メソッド |
ホストリスナー |
constructor(router: Router, dataService: DataService, stateService: StateService, scrollService: ScrollService, changeDetectorRef: ChangeDetectorRef, bottomSheet: MatBottomSheet)
|
|||||||||||||||||||||
Defined in src/app/component/root/root.component.ts:26
|
|||||||||||||||||||||
パラメータ :
|
window:beforeunload |
引数 : '$event'
|
window:beforeunload(e: Event)
|
Defined in src/app/component/root/root.component.ts:98
|
clickOp | ||||||
clickOp(e: Event)
|
||||||
Defined in src/app/component/root/root.component.ts:86
|
||||||
パラメータ :
戻り値 :
void
|
Async favorite |
favorite()
|
Defined in src/app/component/root/root.component.ts:62
|
戻り値 :
any
|
Async init |
init()
|
Defined in src/app/component/root/root.component.ts:52
|
戻り値 :
any
|
newSearch |
newSearch()
|
Defined in src/app/component/root/root.component.ts:72
|
戻り値 :
void
|
ngOnDestroy |
ngOnDestroy()
|
Defined in src/app/component/root/root.component.ts:109
|
戻り値 :
void
|
ngOnInit |
ngOnInit()
|
デコレータ :
@Catch()
|
Defined in src/app/component/root/root.component.ts:48
|
戻り値 :
void
|
resize | ||||||
resize(e: Event)
|
||||||
Defined in src/app/component/root/root.component.ts:104
|
||||||
パラメータ :
戻り値 :
void
|
search |
search()
|
Defined in src/app/component/root/root.component.ts:67
|
戻り値 :
void
|
setting |
setting()
|
Defined in src/app/component/root/root.component.ts:80
|
戻り値 :
void
|
componentRef |
Type : Component
|
デコレータ :
@ViewChild('outret')
|
Defined in src/app/component/root/root.component.ts:21
|
Public dataService |
Type : DataService
|
Defined in src/app/component/root/root.component.ts:30
|
isQue |
既定値 : false
|
Defined in src/app/component/root/root.component.ts:26
|
isUpdate |
既定値 : false
|
Defined in src/app/component/root/root.component.ts:25
|
isWait |
既定値 : true
|
Defined in src/app/component/root/root.component.ts:23
|
Public router |
Type : Router
|
Defined in src/app/component/root/root.component.ts:29
|
Public scrollService |
Type : ScrollService
|
Defined in src/app/component/root/root.component.ts:32
|
Public stateService |
Type : StateService
|
Defined in src/app/component/root/root.component.ts:31
|
subscription |
Type : Subscription
|
Defined in src/app/component/root/root.component.ts:24
|
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;
}