Angular，在其他两个组件中使用一个组件答案

【问题标题】：Angular, using one component in other two componentsAngular，在其他两个组件中使用一个组件
【发布时间】：2018-12-13 16:39:42
【问题描述】：

我想在另外两个组件中使用一个组件：

<jhi-articles-list-component [active]="true"></jhi-articles-list-component>

所以我创建了一些共享模块并像这样导出该组件：

@NgModule({
    exports: [ArticlesListComponent]
})
export class ArticlesListModule {}

然后我将该模块导入到我想使用导致错误的组件的模块中：

无法从 ArticlesListModule 中导出指令 ArticlesListComponent 因为它既没有声明也没有导入！

【问题讨论】：

标签： angular

【解决方案1】：

你应该添加declarations：

@NgModule({
    declarations: [ArticlesListComponent],
    exports: [ArticlesListComponent]
})
export class ArticlesListModule {}

【讨论】：

我现在收到多个模板解析错误，当我在其中一个模块中添加该组件时，它工作得非常好：声明：[HomeComponent ArticlesListComponent]，
我的意思是，在你必须使用它的模块中导入ArticlesListModule ，然后可以在那里使用ArticlesListComponent。你得到什么错误？
我正在按照你说的做，我得到了那个错误：ibb.co/P4BfCCH
@MaciejOstaszewski 在您的ArticlesListModule 中尝试：import { CommonModule } from '@angular/common';，然后将CommonModule 添加到@NgModule 中的另一个数组中：imports: [CommonModule ]

【解决方案2】：

您的组件（在多个地方使用）应该被声明并从它的模块中导出。

这将使它在其他模块中可用，并且可以在导入组件的模块（在本例中为：ArticlesListModule）后使用：

    @NgModule({
       declarations: [ArticlesListComponent],
       exports: [ArticlesListComponent]
    })
    export class ArticlesListModule {}

【讨论】：

@MaciejOstaszewski 您是否导入了ArticlesListModule 并将其添加到您正在使用该组件的模块的@NgModule 的imports 数组中？
是的，我照你说的做了
错误在于您在 HTML 中使用 ngSwitch 的方式。 ngSwitch 不能在 <template> 元素上，只能在像 <div> 这样的真实元素上，只有 ngSwitchCase 可以应用于 <template> 元素。看看这个：stackoverflow.com/a/41085168/9386929

【解决方案3】：

我向该共享模块添加了一些导入，例如 CommonModule，它现在可以工作了。

@NgModule({
   imports: [ArticleSharingAppSharedLibsModule, ArticleSharingAppSharedCommonModule, 
   ArticleSharingAppAppRoutingModule],
   declarations: [ArticlesListComponent],
   exports: [ArticlesListComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

})
export class ArticlesListModule {}

【讨论】：