使用 'mat-nav-list' 不是已知元素 angular 9 - TypeScript

最近，你可能遇到了在 Angular 9 项目中使用 'mat-nav-list' 元素时出现的警告信息："'mat-nav-list' 不是已知元素"。这是由于 Angular 9 的新特性 default Ivy 工具链所导致的问题。

什么是 'mat-nav-list'？

'mat-nav-list' 是 Angular Material UI 库的一部分，它提供了一组用于呈现导航列表和菜单的组件。这些组件包括列表项、分组标题、分割线和二级菜单等。

为什么会出现警告？

在 Angular 9 中，默认开启了新的编译器和运行时引擎 Ivy，它们可以显著提高应用程序的性能和大小。然而，Ivy 也引入了一些变化，包括对组件、指令和管道的元数据处理方式的变化。

如果遇到了 "'mat-nav-list' 不是已知元素" 的警告信息，这意味着 Angular 无法识别这个组件。这是因为在 Ivy 中，需要在组件元数据中明确地声明所使用的所有组件、指令和管道。

如何解决这个问题？

有两种方法可以解决这个问题。

方法一：手动导入模块

第一种方法是手动导入 'MatListModule' 模块，并将其添加到应用程序中。这个模块包含了 Angular Material 中的 'mat-nav-list' 组件。

1. 首先，在你的组件或模块文件中导入 'MatListModule'：

   import { MatListModule } from '@angular/material/list';
   

2. 然后，将 'MatListModule' 添加到你的模块的 'imports' 数组中：

   @NgModule({
     imports: [MatListModule],
     // ...
   })
   export class YourModule { }
   

方法二：手动声明组件

第二种方法是手动声明 'mat-nav-list' 组件。这种方法不需要导入任何模块。

1. 在你的组件或模块文件中，添加一个 'selector' 为 'mat-nav-list' 的组件声明：

   @Component({
     selector: 'mat-nav-list',
     template: '<ng-content></ng-content>'
   })
   export class MatNavListComponent {}
   

2. 这个组件没有任何属性和方法，只是简单地将任何子组件和内容呈现为一个列表。

3. 如果你在组件模板中使用了 'mat-nav-list' 元素，Angular 将会自动使用这个手动声明的组件类。

结论

如果你在 Angular 9 项目中遇到了 "'mat-nav-list' 不是已知元素" 的警告信息，不要惊慌。按照上述方法之一，手动导入模块或手动声明组件即可解决这个问题。