import { Component , ViewChild , ComponentFactoryResolver , ViewContainerRef , AfterViewInit , OnInit , OnDestroy , ElementRef , Renderer2 , Inject , } from '@angular/core' ; import { DOCUMENT } from '@angular/common' ; import { Router , NavigationEnd , RouteConfigLoadStart , NavigationError , NavigationCancel , } from '@angular/router' ; import { NzMessageService } from 'ng-zorro-antd' ; import { Subject } from 'rxjs' ; import { updateHostClass } from '@delon/util' ; import { ScrollService , MenuService , SettingsService } from '@delon/theme' ; import { environment } from '@env/environment' ; import { SettingDrawerComponent } from './setting-drawer/setting-drawer.component' ; import { takeUntil } from 'rxjs/operators' ; @ Component ( { selector : 'layout-default' , templateUrl : './default.component.html' , host : { '[class.alain-default]' : 'true' , } , } ) export class LayoutDefaultComponent implements OnInit , AfterViewInit , OnDestroy { private unsubscribe$ = new Subject < void > ( ) ; @ ViewChild ( 'settingHost' , { read : ViewContainerRef } ) private settingHost : ViewContainerRef ; isFetching = false ; constructor ( router , scroll , _message , private resolver , public menuSrv , public settings , private el , private renderer , @ Inject ( DOCUMENT ) private doc ) { router . events . pipe ( takeUntil ( this . unsubscribe$ ) ) . subscribe ( evt => { if ( ! this . isFetching && evt instanceof RouteConfigLoadStart ) { this . isFetching = true ; } if ( evt instanceof NavigationError || evt instanceof NavigationCancel ) { this . isFetching = false ; if ( evt instanceof NavigationError ) { _message . error ( `无法加载${ evt . url }路由` , { nzDuration : 1000 * 3 } ) ; } return ; } if ( ! ( evt instanceof NavigationEnd ) ) { return ; } setTimeout ( ( ) => { scroll . scrollToTop ( ) ; this . isFetching = false ; } , 100 ) ; } ) ; } private setClass ( ) { const { el , renderer , settings } = this ; const layout = settings . layout ; updateHostClass ( el . nativeElement , renderer , { [ 'alain-default' ] : true , [ `alain-default__fixed` ] : layout . fixed , [ `alain-default__boxed` ] : layout . boxed , [ `alain-default__collapsed` ] : layout . collapsed , } , true ) ; this . doc . body . classList [ layout . colorWeak ? 'add' : 'remove' ] ( 'color-weak' ) ; } ngAfterViewInit ( ) { if ( ! environment . production ) { setTimeout ( ( ) => { const settingFactory = this . resolver . resolveComponentFactory ( SettingDrawerComponent ) ; this . settingHost . createComponent ( settingFactory ) ; } , 22 ) ; } } ngOnInit ( ) { const { settings , unsubscribe$ } = this ; settings . notify . pipe ( takeUntil ( unsubscribe$ ) ) . subscribe ( ( ) => this . setClass ( ) ) ; this . setClass ( ) ; } ngOnDestroy ( ) { const { unsubscribe$ } = this ; unsubscribe$ . next ( ) ; unsubscribe$ . complete ( ) ; } }