Question

我正在开发一个有角度的应用程序。我尝试用材质设计实现导航工具栏。我尝试在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>

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

Answer 1

'app-menu-item'是组件选择器，错误提示您无法识别选择器。反过来，这意味着无法识别选择器的组件（MenuItemComponent）。您必须在适用于您应用程序的模块中注册MenuItemComponent（例如，在app.module或其他功能模块中）。这是语法的官方指南：ngmodules

该组件必须位于一个模块的声明部分。

Answer 2

Wandrille和Rafi Henig是对的。昨天晚上我关闭了计算机，今天早上又关闭了计算机，错误消失了。 wandrille，为回答您的问题，在路由模块中定义了AppListProduitImmobilierComponent。

此外，我不得不更改此行：

@ViewChild（'childMenu'，{static：true}）public childMenu：任意；

。讨论已结束。再次感谢您的回答

模板中的未知元素

2 个答案: