How to use the @angular/cdk/layout.Breakpoints.Handset function in @angular/cdk

function (component, config) {
        var /** @type {?} */ overlayRef = this._createOverlay(config);
        var /** @type {?} */ container = this._attachSnackBarContainer(overlayRef, config);
        var /** @type {?} */ snackBarRef = new MatSnackBarRef(container, overlayRef);
        var /** @type {?} */ injector = this._createInjector(config, snackBarRef);
        var /** @type {?} */ portal = new ComponentPortal(component, undefined, injector);
        var /** @type {?} */ contentRef = container.attachComponentPortal(portal);
        // We can't pass this via the injector, because the injector is created earlier.
        snackBarRef.instance = contentRef.instance;
        // Subscribe to the breakpoint observer and attach the mat-snack-bar-handset class as
        // appropriate. This class is applied to the overlay element because the overlay must expand to
        // fill the width of the screen for full width snackbars.
        this._breakpointObserver.observe(Breakpoints.Handset).pipe(takeUntil(overlayRef.detachments().pipe(first()))).subscribe(function (state$$1) {
            if (state$$1.matches) {
                overlayRef.overlayElement.classList.add('mat-snack-bar-handset');
            }
            else {
                overlayRef.overlayElement.classList.remove('mat-snack-bar-handset');
            }
        });
        return snackBarRef;
    };
    /**

.pipe(
                filter(event => event instanceof NavigationEnd),  // 筛选原始的Observable：this.router.events
                map(() => this.activatedRoute),
                map(route => {
                    while (route.firstChild) {
                        route = route.firstChild;
                    }
                    return route;
                }),
                mergeMap(route => route.data)
            )
            .subscribe((data) => {
                this.hasContentHeader = data['hasContentHeader'] === void (0) || data['hasContentHeader'];
            });

        this.breakpointObserver.observe([ Breakpoints.Handset ])
            .pipe(
                takeUntil(this.ngUnsubscribe),
                map(match => match.matches)
            )
            .subscribe(matches => {
                this.isMobile = matches;

                this.configService.config = {
                    layout: {
                        navbar: {
                            hidden: this.isMobile
                        },
                        toolbar: {
                            position: this.isMobile ? 'below-static' : this.notaddConfig.layout.toolbar.position
                        }
                    }

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { INavBar } from '../interfaces/ICommon';

@Component({
  selector: 'app-my-nav',
  templateUrl: './my-nav.component.html',
  styleUrls: ['./my-nav.component.scss'],
})
export class MyNavComponent implements OnInit {

  isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

  @Input() public showNav: boolean;
  @Input() public applicationName: string;
  @Input() public username: string;
  @Input() public isAdmin: string;
  @Output() public logoutClick = new EventEmitter();
  @Output() public themeChange = new EventEmitter();
  public theme: string;

  constructor(private breakpointObserver: BreakpointObserver) {
  }

  public ngOnInit(): void {

import { Observable } from 'rxjs';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { map } from 'rxjs/operators';
import { AppSettingsService, TracksType } from '../../services/app-settings-service/app-settings-service';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'sidenav-toolbar',
  templateUrl: './sidenav-toolbar.component.html',
  styleUrls: ['./sidenav-toolbar.component.css']
})
export class SidenavToolbarComponent implements OnInit {
  @Output() onMultiMapClick = new EventEmitter();

  TracksType = TracksType;
  isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );


  constructor(
    private breakpointObserver: BreakpointObserver,
    public appSettingsService: AppSettingsService,
    private snackBar: MatSnackBar,
  ) { }

  ngOnInit() {
  }

  changeAppSettings(type: TracksType) {
    this.appSettingsService.tracksDataType = type;

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { map, share } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { AuthService } from './core/services/auth/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  isAuthenticated$: Observable;

  isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      share()
    );

  constructor(
    private authService: AuthService,
    private breakpointObserver: BreakpointObserver
  ) { }

  async ngOnInit() {
    this.isAuthenticated$ = this.authService.getAuthenticationState();
  }

}

interface SideMenuItem {
  name: string;
  icon: string;
  link: string;
}
@Component({
  selector: 'app-admin-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent {
  siteName$ = this.siteSettingsService.getSiteName();
  contentTypes$ = this.contentTypeService.getContentTypes();

  isHandset$: Observable = this.breakpointObserver
    .observe(Breakpoints.Handset)
    .pipe(map(result => result.matches));

  constructor(
    private readonly breakpointObserver: BreakpointObserver,
    private readonly contentTypeService: ContentTypeService,
    private readonly appAuthService: AppAuthService,
    private readonly siteSettingsService: SiteSettingsService,
  ) { }

  logout() {
    console.log(`[NavigationComponent:logout]`);
    this.appAuthService.logOut();
  }
}

constructor(
        public dialogRef: MatDialogRef,
        public dialog: MatDialog,
        private breakpointObserver: BreakpointObserver,
        @Inject(MAT_DIALOG_DATA) public data: any,
        private fb: FormBuilder,
        private cd: ChangeDetectorRef,
        private logger: NGXLogger
    ) {
        this.breakpointObserver.observe(Breakpoints.Handset)
            .pipe(
                tap(result => {
                    if (result.matches) {
                        this.isHandset = true
                        this.cd.markForCheck()
                    }
                    else {
                        this.isHandset = false
                        this.cd.markForCheck()
                    }
                })
            ).subscribe()
    }

constructor(
    public pageHeaderService: PageHeaderService,
    private store: Store,
    private eventWatcherService: EventWatcherService,
    private breakpointObserver: BreakpointObserver,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private metricsService: MetricsService,
    private endpointsService: EndpointsService,
  ) {
    if (this.breakpointObserver.isMatched(Breakpoints.Handset)) {
      this.enableMobileNav();
    }
  }

constructor(
        public dialogRef: MatDialogRef,
        public dialog: MatDialog,
        @Inject(MAT_DIALOG_DATA) public data: any,
        private videoService: VideoCallService,
        private action$: Actions,
        private store: Store,
        private logger: NGXLogger,
        private shortcutUtil: ShortcutUtil,
        private breakpointObserver: BreakpointObserver
    ) {
        this.breakpointObserver.observe([
            Breakpoints.Handset,
            Breakpoints.Tablet
        ]).subscribe(result => {
            if (result.matches) {
                this.isHandset = true
            }
            else {
                this.isHandset = false
            }
        })
    }

animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(500, style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate(500, style({ opacity: 0 }))
      ])
    ])
  ]
})
export class ToolbarComponent implements OnInit {

  /** Subscription to breakpoint observer for handset. */
  isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

  /** Sets the initial visibility of search input as hidden. Visible if true. */
  searchVisible = false;
  /** Sets the initial state of sidenav as collapsed. Not collapsed if false. */
  sidenavCollapsed = true;

  /** Instance of sidenav. */
  @Input() sidenav: MatSidenav;
  /** Sidenav collapse event. */
  @Output() collapse = new EventEmitter();

  /**
   * @param {BreakpointObserver} breakpointObserver Breakpoint observer to detect screen size.