模板中的未知元素

Question

我正在开发一个 angular 应用程序。我尝试使用 material 设计实现导航工具栏。我尝试在 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: 任何;

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

模板中的未知元素

unknown element in a template

navigationbar

angular-material

angular