带有@Input的角度组件在声明它的另一个模块中使用

Question

我有以下组件，它声明了@Input：

@Component({
selector: 'app-api-error-message',
templateUrl: './api-error-message.component.html',
styleUrls: ['./api-error-message.component.scss'],
inputs: ['ErrorMessages']
})
export class ApiErrorMessageComponent implements OnInit {
@Input() ErrorMessages: ErrorMessage[];
constructor(private router: Router, private _location: Location) { }
ngOnInit(): void {
}
}

该组件在应用程序模块中声明并导出：

@NgModule({
declarations: [
AppComponent,
ApiErrorMessageComponent
],
imports: [
CommonModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
MyOtherModule
],
exports: [
ApiErrorMessageComponent
]
})
export class AppModule { }

我正在尝试在"MyOtherModule"中声明的组件中使用ApiErrorMessageComponent。

@NgModule({
declarations: [
MyComponent
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MyOtherRoutingModule
]
})
export class MyOtherModule { }

MyComponent.html：

<app-api-error-message [ErrorMessages]="errorData"></app-api-error-message>

但我收到以下错误消息：

Compiled with problems:X
ERROR
MyComponent.component.html:2:3 - error NG8001: 'app-api-error-message' is not a known element:
1. If 'app-api-error-message' is an Angular component, then verify that it is part of this module.
2. If 'app-api-error-message' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
2   <app-api-error-message [ErrorMessages]="errorData"></app-api-error-message>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
MyComponent.ts:9:16
9   templateUrl: './MyComponent.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MyComponent.

ERROR
MyComponent.component.html:2:26 - error NG8002: Can't bind to 'ErrorMessages' since it isn't a known property of 'app-api-error-message'.
1. If 'app-api-error-message' is an Angular component and it has 'ErrorMessages' input, then verify that it is part of this module.
2. If 'app-api-error-message' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
2   <app-api-error-message [ErrorMessages]="errorData"></app-api-error-message>
~~~~~~~~~~~~~~~~~~~~~~~~~~~
MyComponent.component.ts:9:16
9   templateUrl: './MyComponent.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component MyComponent.

有什么我想不出来的吗。。。。。。

Answer 1

注意到您的MyOtherModule模块的imports对象只包含模块吗？必须将AppModule添加到MyOtherModule的imports中，才能在MyOtherModule模块内部使用组件AppComponent导出。

@NgModule({
declarations: [
MyComponent
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MyOtherRoutingModule,
AppModule // IMPORTANT !!!!
]
})
export class MyOtherModule { }

通常，在大型应用程序中，有几个模块对应于各自应用程序领域的自然模块。如果一个组件需要在模块之间共享，那么创建一个在所有其他模块中导入的CommonModule可能是明智的。

Answer 2

在这个罐子里，我建议你遵循SCAM(单组件角度模块(模式。

SCAM-

• 每个组件都有自己的NgModule
• 无论在哪里使用组件，组件的使用者都必须在其NgModule中导入新创建的NgModule
• 它有助于隔离组件
• 步骤可帮助您朝着独立组件的方向前进

---

@NgModule({
declarations: [ApiErrorMessageComponent],
exports: [ApiErrorMessageComponent],
import: [
CommonModule,
...
],
})
export class ErrorMessageModule {
}

在使用方面，请在NgModule中导入ErrorMessageModule，无论您想在哪个位置使用ApiErrorMessageComponent。就像这里一样，它将在中导入

1. MyOtherModule的imports
2. AppModule中的imports