angular - 在 viewInit 上使用 *ngFor 和 view-child 动态地将 mat-menu 渲染为导航标题

Question

navbar我的目的是从Router.config角度材料中动态创建一个。我创建了一个函数来设置标题元素（导航菜单）。模板用于*ngFor生成路由列表，而子路由写为 subMenu as mat-menu。我无法决定何时调用该函数。当我调用函数时ngOnInit()我得到ViewChild未定义，当我调用它时ngAfterViewInit()，我得到以下两个错误：-

错误：-

matMenuTriggeredFor:must pass a matMenu instance



HeaderComponent.html:8 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngForOf: undefined'. Current value: 'ngForOf: [object Object],[object Object],[object Object]'

我已经viewChild向 the 提供了 ref，[matMenuTriggeredFor]但它似乎没有被分配。

export class HeaderComponent implements OnInit, AfterViewInit, AfterContentInit {
  public headerElements = [];
  public childElements = {};

  @ViewChild("ABOUTUS") ABOUTUS: ElementRef;
  @ViewChild("TECHNOLOGY") TECHNOLOGY: ElementRef;
  @ViewChild("CAREERS") CAREERS: ElementRef;
  @ViewChild("BUSINESSPROFILE") BUSINESSPROFILE: ElementRef;

viewObjects = {
    ABOUTUS: this.ABOUTUS,
    TECHNOLOGY: this.TECHNOLOGY,
    CAREERS: this.CAREERS,
    BUSINESSPROFILE: this.BUSINESSPROFILE
  };

 ngAfterViewInit() {
    console.log(this.ABOUTUS);
    this._SetHeaderElements(this.router.config);
  }


private _SetHeaderElements(_Routes) {
    let parentIndex = 0;
    _Routes.forEach(element => {
      let childIndex = 0;
      if (element.path != "" && element.path != "**") {
        let title = element.data.title.toUpperCase();
        let url = element.path;
        let subMenuRefKey = element.data.title.replace(" ", "").toUpperCase();
        let subMenuRef = this.viewObjects[subMenuRefKey];
        this.headerElements[parentIndex] = { title, url, subMenuRef };
        if (element.children) {
          this.childElements[subMenuRefKey] = [];
          element.children.map(childElem => {
            if (childElem.data) {
              let title = childElem.data.title.toUpperCase();
              let url = childElem.path;
              this.childElements[subMenuRefKey][childIndex] = {
                title,
                url
              };
              childIndex++;
            }
          });
        }
        parentIndex++;
      }
    });
    console.log(this.headerElements);
    console.log(this.childElements);
  }
}

<!--template-->
<mat-toolbar>
  <ng-container *ngFor="let header of headerElements; let ind = index">
    <button mat-button [matMenuTriggerFor]="header.subMenuRef">
      {{ header.title }}
    </button>
  </ng-container>
  <mat-menu #ABOUTUS="matMenu">
    <button *ngFor="let el of childElements.ABOUTUS" mat-menu-item>
      {{ el.title }}
    </button>
  </mat-menu>
  <mat-menu #BUSINESSPROFILE="matMenu"></mat-menu>
  <mat-menu #TECHNOLOGY="matMenu"></mat-menu>
  <mat-menu #CAREERS="matMenu"></mat-menu>
</mat-toolbar>

---

路线如下：

const APP_ROUTES: Routes = [
  {
    path: "",
    redirectTo: "/home",
    pathMatch: "full"
  },
  {
    path: "home",
    data: { title: "Home" },
    component: HomeComponent
  },
  {
    path: "about-us",
    children: ABOUTUS_ROUTES,
    data: { title: "About Us" }
  },
  {
    path: "business-profile",
    children: BUSINESSPROFILE_ROUTES,
    data: { title: "Business Profile" }
  },
  {
    path: "technology",
    children: TECHNOLOGY_ROUTES,
    data: { title: "Technology" }
  },
  {
    path: "careers",
    children: CAREERS_ROUTES,
    data: { title: "Careers" }
  },
  {
    path: "**",
    redirectTo: "/home",
    pathMatch: "full"
  }
];

------------------------------子路由------------------ ---------------

const ABOUTUS_ROUTES = [
  {
    path: "",
    component: AboutusComponent
  },
  {
    path: "corporate-summary",
    component: CorporateSummaryComponent,
    data: { title: "CORPORATE SUMMARY" }
  },
  {
    path: "history",
    component: HistoryComponent,
    data: { title: "HISTORY" }
  },
  {
    path: "network",
    component: NetworkComponent,
    data: { title: "NETWORK" }
  }
];




 const BUSINESSPROFILE_ROUTES = [
        { 
          path: '', component: BusinessProfileComponent 
        },
        {
            path: 'chassis', component: ChassisComponent,         
            data:{title:'Chassis'}
        },
        {
            path: 'susspension', component: SuspenssionsComponent, 
             data: {title: 'Susspenssions'}
        }
    ];




    const TECHNOLOGY_ROUTES = [
  {
    path: "",
    component: TechnologyComponent
  },
  {
    path: "research-and-development",
    component: RnDComponent,
    data: { title: "Research & Development" }
  },

  {
    path: "ultra-high-tensile-stamping",
    component: UhtStampingComponent,
    data: { title: "Ultra-High Tensile Stamping" }
  }
];



CAREERS_ROUTES = [
  {
    path: "",
    component: CareersComponent
  },
  {
    path: "shop-floor-execellence",
    component: ShopFloorExcellenceComponent,
    data: { title: "Shop Floor Execellence" }
  },
  {
    path: "graduate-program",
    component: GraduateProgramComponent,
    data: { title: "Graduate Program" }
  }]

标签： angular