1

Angular Material SideNav 菜单在 iOS 中不起作用（chrome 和 safari）

在 iOS 版本 11.2.6（Iphone 6 和 SE）中测试

但在Android中工作。我已取消选中并安装了以下 polyfill

import 'web-animations-js';

在 ployfills.ts 中。是否有任何解决方法可以使其在 iOS 中运行？

HTML-

<mat-toolbar color="primary" class="example-toolbar headerToolBar" >
      <button class="hamBurg" mat-icon-button (click)="snav.toggle()"><i class="fa fa-bars"></i></button>
      <h1 class="example-app-name">AppName</h1>
    </mat-toolbar>

    <mat-sidenav-container  class="example-sidenav-container"
                           [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
      <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
                   [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
        <mat-nav-list>
          <!-- <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a> -->
         <app-accordian-menu-items></app-accordian-menu-items>

        </mat-nav-list>
      </mat-sidenav>

      <mat-sidenav-content>
        <!-- <p *ngFor="let content of fillerContent">{{content}}</p> -->
      </mat-sidenav-content>
    </mat-sidenav-container>

对应的TS-

  import {MediaMatcher} from '@angular/cdk/layout';
  import {ChangeDetectorRef, Component, ViewChild} from '@angular/core';
  import { MatSidenav } from '@angular/material';

  /** @title Responsive sidenav */
  @Component({
    selector: 'app-hamburger-menu',
    templateUrl: './hamburger-menu.component.html',
    styleUrls: ['./hamburger-menu.component.css']
  })
  export class HamburgerMenuComponent {
    mobileQuery: MediaQueryList;



    private _mobileQueryListener: () => void;

    constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
      this.mobileQuery = media.matchMedia('(max-width: 992px)');
      this._mobileQueryListener = () => changeDetectorRef.detectChanges();
      this.mobileQuery.addListener(this._mobileQueryListener);
    }

    ngOnDestroy(): void {
      this.mobileQuery.removeListener(this._mobileQueryListener);
    }


  }

Polyfills.TS 运行命令并取消注释 polyfill

/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.

角度版本

Angular CLI: 1.6.8
Node: 8.11.2
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.4
@angular/cli: 1.6.8
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0
4

0 回答 0