Angular:无法识别来自共享模块的组件

Ste*_*eve 5 javascript angular

到目前为止,我有一个包含 2 个模块的应用程序:“共享”和“网络”。

我在网络中的所有组件都运行良好。我刚刚在 Shared 模块中创建了一个简单的组件,因为我计划在整个应用程序中重复使用它:

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

@Component({
  selector: 'pb-ds-pluginstable',
  templateUrl: './pluginstable.component.html',
  styleUrls: ['./pluginstable.component.scss']
})
export class PluginstableComponent implements OnInit {

  @Input() name: string;
  @Input() version: string;
  @Input() link: string;

  constructor() {}
  ngOnInit() {}

}
Run Code Online (Sandbox Code Playgroud)

这被导入共享模块,并导出:

...other imports...
import { PluginstableComponent } from './pluginstable/pluginstable.component';

@NgModule({
imports: [
  CommonModule,
  RouterModule,
  NgbModule
],
  declarations: [HeaderComponent, FooterComponent, HeaderShadowDirective, PluginstableComponent],
  exports: [HeaderComponent, FooterComponent, HeaderShadowDirective, PluginstableComponent]
})
export class SharedModule { }
Run Code Online (Sandbox Code Playgroud)

但是当我在 Web 模块的组件模板中使用它时,如下所示:

<pb-ds-pluginstable name="foo" version="2.2.2" link="bar"></pb-ds-pluginstable>
Run Code Online (Sandbox Code Playgroud)

我收到无法识别组件的错误:

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'pb-ds-pluginstable' is not a known element:
1. If 'pb-ds-pluginstable' is an Angular component, then verify that it is part of this module.
2. If 'pb-ds-pluginstable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </section>

  [ERROR ->]<pb-ds-pluginstable name="foo" version="2.2.2" link="bar"></pb-ds-pluginstable>
Run Code Online (Sandbox Code Playgroud)

我在这里缺少什么?

Sur*_*yan 9

您还需要导入SharedModule其中(不是父模块,不是子模块,确切地说是该模块)module您想在其中使用它的导出元素

@NgModule({
   imports: [
      SharedModule,
      ...
   ]
})
export class YourModule { }
Run Code Online (Sandbox Code Playgroud)

  • 谢谢。对于阅读本文的其他人来说,这当然也意味着将导入添加到模块的顶部:`import { SharedModule } from '../shared/shared.module';` (2认同)