我正在开发一个有角度的应用程序。我尝试用材质设计实现导航工具栏。我尝试在stackblitz上重现此示例：https://stackblitz.com/edit/dynamic-nested-topnav-menu?file=app%2Fapp.component.html

我有一个组件AppListProduitImmobilierComponent：

import ......
import {VERSION} from '@angular/material';
import {NavItem} from './../nav-item';

@Component({
  selector: 'app-app-list-produit-immobilier',templateUrl: './app-list-produit-immobilier.component.html',styleUrls: ['./app-list-produit-immobilier.component.scss'],encapsulation: ViewEncapsulation.None
})
export class AppListProduitImmobilierComponent implements OnInit {
  ......
  ......
  public version = VERSION;
  public navItems: NavItem[] = [
    {
      displayName: 'DevFestFL',iconName: 'close',children: [
        {
          displayName: 'Speakers',iconName: 'group',children: [
.....
.....

及其模板：

<mat-toolbar color="primary" class="menu-bar mat-elevation-z1">
  <div style="width:100%;" class="md-toolbar-tools" >
    Liste des annonces
    <span flex></span>
  </div>
  <span *ngFor="let item of navItems">
    <!-- Handle branch node buttons here -->
    <span *ngIf="item.children && item.children.length > 0">
      <button mat-button [matMenuTriggerFor]="menu.childMenu"
        [disabled]="item.disabled">
          {{item.displayName}}
      </button>
      <app-menu-item #menu [items]="item.children"></app-menu-item>
    </span>
    <!-- Leaf node buttons here -->
    <span *ngIf="!item.children || item.children.length === 0">
      <button mat-button color="primary" [routerLink]="item.route">
          {{item.displayName}}
      </button>
    </span>
  </span>
</mat-toolbar>
<div fxLayout="row">
.........
.........

我的编辑器提到模板中以下元素的错误：

<app-menu-item #menu [items]="item.children"></app-menu-item>

错误是：

 'app-menu-item' is not a known element: 1. If 'app-menu-item' is an Angular component,then verify that it is part of this module.

但是在根模块中声明了MenuItemComponent：

@NgModule({
  declarations: [
    .......
    MenuItemComponent
  ],imports: [
    .......
  ],providers: [.....],bootstrap: [......],entryComponents: [.........]
})
export class AppModule { }

这是组件MenuItemComponent：

import { Component,Input,OnInit,ViewChild } from '@angular/core';
import {Router} from '@angular/router';
import {NavItem} from '../nav-item';

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

  @Input() items: NavItem[];
  @ViewChild('childMenu',{static: false}) public childMenu;

  constructor(public router: Router) { }

  ngOnInit() {
  }

}

及其模板：

<mat-menu #childMenu="matMenu" [overlapTrigger]="false">
  <span *ngFor="let child of items">
    <!-- Handle branch node menu items -->
    <span *ngIf="child.children && child.children.length > 0">
      <button mat-menu-item color="primary" [matMenuTriggerFor]="menu.childMenu">
        <mat-icon>{{child.iconName}}</mat-icon>
        <span>{{child.displayName}}</span>
      </button>
      <app-menu-item #menu [items]="child.children"></app-menu-item>
    </span>
    <!-- Handle leaf node menu items -->
    <span *ngIf="!child.children || child.children.length === 0">
      <button mat-menu-item [routerLink]="child.route">
        <mat-icon>{{child.iconName}}</mat-icon>
        <span>{{child.displayName}}</span>
      </button>
    </span>
  </span>
</mat-menu>

我花了很多时间试图解决它，但是我看不到解决方案。你能帮我吗？