使用通过href调用的data-toggle =“ tab”时，使用Angular Material的Angular 8应用程序无法在Internet Explorer上运行

Question

我将Angular 8与角材料一起使用，并且在IE edge或早期版本上遇到问题（在chrome上工作正常）

问题：

  

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段：“ content-2”
  错误：无法匹配任何路线。网址段：“ content-2”

HTML：

<div class="card">
    <div id="submenu" class="card-header card-header-tabs card-header-primary">
        <div class="nav-tabs-navigation">
            <div class="nav-tabs-wrapper">
                <span class="nav-tabs-title"></span>
                <ul class="nav nav-tabs" data-tabs="tabs">
                    <li class="nav-item">
                        <a mat-button class="nav-link active" href="#content-1" data-toggle="tab">
                            <i class="material-icons"></i> Content 1
                            <div class="ripple-container"></div>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a mat-button class="nav-link" href="#content-2" data-toggle="tab">
                            <i class="material-icons"></i> Content 2
                            <div class="ripple-container"></div>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a mat-button class="nav-link" href="#content-3" data-toggle="tab">
                            <i class="material-icons"></i> Content 3
                            <div class="ripple-container"></div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane active" id="content-1">
                <app-list type="ct-1"></app-list>
            </div>
            <div class="tab-pane" id="content-2">
                <app-list type="ct-2"></app-list>
            </div>
            <div class="tab-pane" id="content-3">
                <app-list type="ct-3"></app-list>
            </div>
        </div>
    </div>
</div>

角度：

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { MyService } from '../../MyService.service';
import { MatDialog } from '@angular/material';
import { DialogComponent } from '../dialog/dialog.component';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Location } from '@angular/common';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})

export class ListComponent implements OnInit {
  activeModule;
  activeSection;
  dataSource;
  totalRecords: number;
  columnsToDisplay: string[];

  @Input()
  type: string;

  @ViewChild(MatSort, { static: true }) sort: MatSort;

  constructor(private myService: MyService, public dialog: MatDialog, private location: Location) {

    this.activeModule = this.location.path().split('/')[1];
    this.activeSection = this.location.path().split('/')[2];

    switch (this.activeModule) {
      case 'module1':
        this.columnsToDisplay = ['column 1', 'column 2', 'column 3', 'column 4', 'column 5'];
        break;
      case 'module2':
      case 'module3':
        this.columnsToDisplay = ['column 1', 'column 2', 'column 3', 'column 4'];
        break;
    }
  }

  openDialog(id, indexRow: number): void {
    this.myService.getById(id).subscribe(data => {
      const dialogRef = this.dialog.open(DialogComponent, {
        width: '650px',
        data: data
      });

      dialogRef.afterClosed().subscribe(result => {
        if (result) {
          this.removeAt(indexRow);
        }
      });
    });
  }

  ngOnInit() {
    let serviceCall;

    // console.log(this.type);
    switch (this.type) {
      case 'ct-1':
        serviceCall = 'getContent1';
        break;
      case 'ct-2':
        serviceCall = 'getContent2';
        break;
      case 'ct-3':
        serviceCall = 'getContent3';
        break;
    }

    this.myService[serviceCall]().subscribe((data) => {
      const res = data.length > 150 ? data.slice(0, 150) : data;

      this.totalRecords = data.length;
      this.dataSource = new MatTableDataSource(res);
      this.dataSource.sort = this.sort;
    });
  }

  removeAt(index: number) {
    const data = this.dataSource.data;
    data.splice(index, 1);

    this.dataSource.data = data;
  }
}

当我使用cosole.log()检查类型时，单击模块2可以同时执行 ct-1，ct-2，ct-3 出于这个原因，我认为该问题与角度材料有关，因为已加载了内容，但是，制表符操作不起作用，并且出现了错误消息

  

我正在使用Polyfills imports和<meta http-equiv="X-UA-Compatible" content="IE=edge" />，但并不能解决问题。