Angular 编译错误:NG6001:该类列在 NgModule 'AppModule' 的声明中,但不是指令、组件或管道

rnx*_*fod 38 typescript angular

应用程序无法编译并出现错误

错误 NG6001:类“NavigationMenuItemComponent”列在 NgModule“AppModule”的声明中,但不是指令、组件或管道。从 NgModule 的声明中删除它,或者添加一个合适的 Angular 装饰器。

当我删除带有参数的构造函数时,错误消失了。
如何在维护具有参数的构造函数的同时解决此问题,因为我想用来初始化组件列表,而不必为列表中的每个成员调用 set 方法



    import {
        Component,
        OnInit
    } from '@angular/core';

    @Component({
        selector: 'app-navigation-menu-item',
        templateUrl: './navigation-menu-item.component.html',
        styleUrls: ['./navigation-menu-item.component.scss']
    })
    export class NavigationMenuItemComponent implements OnInit {
        static readonly ID_PREFIX: string = 'sidebar-menuitem-';
        static readonly ICON_CLASS_PREFIX: string = 'mdi mdi-';

        constructor(id: string, iconClass: string) {
            this._id = NavigationMenuItemComponent.ID_PREFIX + id;
            this._iconClass = NavigationMenuItemComponent.ICON_CLASS_PREFIX + iconClass;
        }
        //constructor() {}

        private _id: string;
        private _iconClass: string;

        get id() {
            return this._id;
        }

        get iconClass() {
            return this._iconClass;
        }

        set id(id: string) {
            this._id = NavigationMenuItemComponent.ID_PREFIX + id;
        }

        set iconClass(iconClass) {
            this._iconClass = NavigationMenuItemComponent.ID_PREFIX + iconClass;
        }

        ngOnInit(): void {}
    }

小智 37

npm install创建新组件时必须运行。热重载似乎无法添加组件。

  • 重新执行“ngserve”对我来说是这样。 (18认同)

TmT*_*ron 23

当您有多个错误消息时,此错误消息可能会首先显示。
因此,请务必检查其他错误消息

就我而言,我有一个拼写错误tempalteURL(另一条错误消息清楚地表达了这一点NG2008: Could not find template file:)


小智 7

我遇到过同样的问题。在声明部分以及课堂中删除 OnInit 对我有帮助。因为它初始化了指令的所有数据绑定属性。因为这个组件可以添加到 app.module.ts 中。

export class NavigationMenuItemComponent {
     ....
     ....
     set iconClass(iconClass) {
            this._iconClass = NavigationMenuItemComponent.ID_PREFIX + iconClass;
        }

        //ngOnInit(): void {}
    }
Run Code Online (Sandbox Code Playgroud)


小智 5

在组件中添加这些行:

constructor() {};

ngOnInit(): void {};
Run Code Online (Sandbox Code Playgroud)

我也面临同样的问题,但我认为发生错误是因为 Angular 不再通过添加构造函数将其视为完整组件并ngOnIt解决了问题。

  • 为我工作!就我而言,构造函数后面缺少尾随“;”,添加 `constructor() {};` 修复了它 (2认同)

Ser*_*gey 4

我认为它正在发生,因为 Angular 被设计为使用组件的构造函数来与基于类而不是基元的依赖注入系统一起工作。

基本上,您无法创建自己的组件并为其构造函数提供所需的道具。

为什么,因为它会破坏控制反转原理,从而导致可维护性问题。

你可以做什么:

  1. 使用@Input()这个装饰器是由 Angular 开发团队专门设计的,用于在运行时为组件提供值。如果您稍后更改它们也没关系。您可以在这里这里阅读更多内容

  2. 如果您需要某种配置来全局或在某个级别提供,您可以创建自己的配置并在创建时Injector提供它,以便组件可以使用。一些信息可以在这里Token找到

基本上,您应该可以接受第一种方法,因为很清楚您在代码中做什么,并且这是一种常见的做法,同时第二种方法更麻烦,更适合在服务中使用。


长话短说

使用@Input它是一种将属性传递给子组件的常见做法。