类声明的 Angular 应用程序问题，可能不正确的装饰器使用

Question

我收到有关类 UserAddComponent 声明的以下错误:

    ERROR in src/app/user/user.module.ts:10:37 - error NG6001: The class 'UserAddComponent' is 
listed in the declarations of the NgModule 'UserModule', but is not a directive, a component, or a 
pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

10   declarations: [UserViewComponent, UserAddComponent],
                                       ~~~~~~~~~~~~~~~~

  src/app/user/user-add/user-add.component.ts:6:14
    6 export class UserAddComponent {
                   ~~~~~~~~~~~~~~~~
    'UserAddComponent' is declared here.
src/app/user/user-add/user-add.component.ts:6:14 - error NG6003: Appears in the NgModule.exports of 
UserModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

Is it missing an Angular annotation?

6 export class UserAddComponent {
               ~~~~~~~~~~~~~~~~
src/app/user/user.module.ts:20:14 - error NG6002: Appears in the NgModule.imports of AppModule, but 
itself has errors

20 export class UserModule {
                ~~~~~~~~~~

问题的两个文件是user-add.components.ts:

import {User} from '../../models/user';
import {Store} from '@ngrx/store';
import {UserState} from '../store/reducer/user.reducer';
import {addUser} from '../../user.actions';

export class UserAddComponent {

  constructor(private store: Store<UserState>) {
  }

  addUser(userName: string): void {
    const user = new User();
    user.name = userName;
    this.store.dispatch(addUser(user));
  }
}

和 user.module.ts:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {UserViewComponent} from './user-view/user-view.component';
import {UserAddComponent} from './user-add/user-add.component';
import {StoreModule} from '@ngrx/store';
import {userFeatureKey, reducer} from './store/reducer/user.reducer';


@NgModule({
  declarations: [UserViewComponent, UserAddComponent],
  imports: [
    CommonModule,
    StoreModule.forFeature(userFeatureKey, reducer),
  ],
  exports: [
    UserViewComponent,
    UserAddComponent
  ]
})
export class UserModule {
}

我是 Angular 的新手(这是我的第一个网络应用程序)，所以如果这是一个完全菜鸟的问题，请原谅，但暂时，我很困惑。据我所知，我正确地使用了装饰器@NgModule。错误似乎是循环的，所以可能存在引用错误。我将此代码基于本文中的模板:https://dzone.com/articles/angular-app-state-management-with-ngrx .这是相当新的，所以我不确定它是版本不兼容，除非作者使用旧版本。谢谢。

Answer 1

您错过了类 UserAddComponent 的组件装饰器。只需在类上方添加@Component({})

import { Component } from '@angular/core';
...

@Component({
  selector: 'selector-name',
  styleUrls: ['./selector-name.component.scss'],
  templateUrl: './selector-name.component.html',
})

export class UserAddComponent {
    ...
}

在模块的声明数组中，您应该声明组件、指令、管道。不是普通类。

这里的 @Component({}) 装饰器将一个类标记为 Angular 组件，并提供配置元数据，以确定组件在运行时应如何处理、实例化和使用。

Angular Component