TypeScript material.MatSidenav类代码示例

    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------

    /**
     * On init
     */
    ngOnInit(): void
    {
        // Register the sidenav to the service
        this._fuseMatSidenavHelperService.setSidenav(this.fuseMatSidenavHelper, this._matSidenav);

        if ( this._observableMedia.isActive(this.matIsLockedOpen) )
        {
            this.isLockedOpen = true;
            this._matSidenav.mode = 'side';
            this._matSidenav.toggle(true);
        }
        else
        {
            this.isLockedOpen = false;
            this._matSidenav.mode = 'over';
            this._matSidenav.toggle(false);
        }

        this._fuseMatchMediaService.onMediaChange
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(() => {
                if ( this._observableMedia.isActive(this.matIsLockedOpen) )
                {
                    this.isLockedOpen = true;
                    this._matSidenav.mode = 'side';
                    this._matSidenav.toggle(true);
                }
                else
                {
                    this.isLockedOpen = false;
                    this._matSidenav.mode = 'over';
                    this._matSidenav.toggle(false);
                }
            });
    }

 .subscribe(() => {
     if ( this._observableMedia.isActive(this.matIsLockedOpen) )
     {
         this.isLockedOpen = true;
         this._matSidenav.mode = 'side';
         this._matSidenav.toggle(true);
     }
     else
     {
         this.isLockedOpen = false;
         this._matSidenav.mode = 'over';
         this._matSidenav.toggle(false);
     }
 });

    /**
     * Handle swipes and gestures
     */
    public swipe(e: TouchEvent, when: string): void {
        const coord: [number, number] = [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
        const time = new Date().getTime();

        if (when === 'start') {
            this.swipeCoord = coord;
            this.swipeTime = time;
        } else if (when === 'end') {
            const direction = [coord[0] - this.swipeCoord[0], coord[1] - this.swipeCoord[1]];
            const duration = time - this.swipeTime;
            if (
                duration < 1000 &&
                Math.abs(direction[0]) > 30 && // swipe length to be detected
                Math.abs(direction[0]) > Math.abs(direction[1] * 3) // 30° should be "horizontal enough"
            ) {
                // definition of a "swipe right" gesture to move in the navigation
                // only works in the far left edge of the screen
                if (
                    direction[0] > 0 && // swipe left to right
                    this.swipeCoord[0] < 20
                ) {
                    this.sideNav.open();
                }

                // definition of a "swipe left" gesture to remove the navigation
                // should only work in mobile mode to prevent unwanted closing of the nav
                // works anywhere on the screen
                if (
                    direction[0] < 0 && // swipe left to right
                    this.vp.isMobile
                ) {
                    this.sideNav.close();
                }
            }
        }
    }

    /**
     * Initialize the site component
     */
    public ngOnInit(): void {
        this.vp.checkForChange();

        // observe the mainMenuService to receive toggle-requests
        this.mainMenuService.toggleMenuSubject.subscribe((value: void) => this.toggleSideNav());

        // get a translation via code: use the translation service
        // this.translate.get('Motions').subscribe((res: string) => {
        //      console.log('translation of motions in the target language: ' + res);
        //  });

        // TODO: Remove this, when the ESR version of Firefox >= 64.
        const agent = navigator.userAgent.toLowerCase();
        if (agent.indexOf('firefox') > -1) {
            const index = agent.indexOf('firefox') + 8;
            const version = +agent.slice(index, index + 2);

            if (version < 64) {
                const sideNav = document.querySelector(
                    'mat-sidenav.side-panel > div.mat-drawer-inner-container'
                ) as HTMLElement;
                sideNav.style.overflow = 'hidden';
                sideNav.addEventListener('MozMousePixelScroll', (event: any) => {
                    sideNav.scrollBy(0, event.detail);
                });
            }
        }

        this.router.events.subscribe(event => {
            // Scroll to top if accessing a page, not via browser history stack
            if (event instanceof NavigationEnd) {
                const contentContainer = document.querySelector('.mat-sidenav-content');
                if (contentContainer) {
                    contentContainer.scrollTo(0, 0);
                }
            }
        });
    }

 this.authService.authStatus.subscribe(authStatus => {
   if (!authStatus.isAuthenticated) {
     this.sideNav.close()
   }
 })

 /**
  * Automatically close the navigation in while navigating in mobile mode
  */
 public mobileAutoCloseNav(): void {
     if (this.vp.isMobile) {
         this.sideNav.close();
     }
 }

 /**
  * Toggles the side nav
  */
 public toggleSideNav(): void {
     this.sideNav.toggle();
 }

 /**
  * Toggle this sidenav. This is equivalent to calling open() when it's already opened, or close() when it's closed.
  *
  * @param {boolean} isOpen  Whether the sidenav should be open.
  *
  * @returns {Promise<MatSidnavToggleResult>}
  */
 public toggle(isOpen?: boolean): Promise<MatDrawerToggleResult> {
   this.sidenav.toggle(isOpen);
   return;
 }

 /**
  * Close this sidenav, and return a Promise that will resolve when it's fully closed (or get rejected if it didn't).
  *
  * @returns Promise<MatSidnavToggleResult>
  */
 public close(): Promise<MatDrawerToggleResult> {
   this.sidenav.close();
   return;
 }

 /**
  * Open this sidenav, and return a Promise that will resolve when it's fully opened (or get rejected if it didn't).
  *
  * @returns Promise<MatSidnavToggleResult>
  */
 public open(): Promise<MatDrawerToggleResult> {
   this.sidenav.open();
   
   return;
 }