Angular5、在子模块中使用组件

Question

当我细分我的应用程序以提高延迟加载效率时，我遇到了一个我似乎无法补救的错误并为 "child"、
使用子路由器我需要使用主应用程序中使用的组件。

但我收到 下面的错误消息

Type AccountInfoComponent is part of the declarations of 2 modules

我的应用程序结构如下所示

app
|--components
    |--accountInfo
        |--accountInfo.component.ts
    |--user
        |--user.component.ts
|--modules
    |--child
        |--child.component.ts
        |--child.module.ts
        |--child.routing.module.ts
|--app.module.ts
|--app.routing.module.ts

其中 AccountInfoComponent 在主模块中声明（它没有导入到主路由器中，而是通过它的选择器调用...）

所以我将我的 "child" 组件移动到它自己的模块中，完成了一个路由器（针对儿童）和延迟加载

我的"Child.router"看起来像这样

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ChildComponent } from './child.component';
import { ChildProfileComponent } from './child.profile.component';

import { AccountInfoComponent } from '../../components/accountinfo/accountinfo.component';

const childRoutes: Routes = [
    {
        path: '', 
        component: ChildComponent,
        children: [
            {
                path: '',
                component: ChildProfileComponent
            },
            {
                path: 'account',
                component: AccountInfoComponent 
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild( childRoutes )
    ],
    exports: [
        RouterModule
    ]
})
export class ChildRoutingModule {}

主要app.module声明AccountInfoComponent因为它被用在user.component.

我试过将 AccountInfoComponent 导入子路由器，我试过从主模块导出它。

QUESTION: How do I use a component in more than one module? the main app and a nested module?

Answer 1

确实不能在多个模块中声明一个组件

您可以创建一个共享模块，其中包含您希望在多个模块中重复使用的组件。

您示例中的这个共享模块可以声明和导出 AccountInfoComponent，以及您需要在不同模块中重用的其他组件。

https://angular.io/guide/ngmodule-faq#sharedmodule

您可以在共享模块中声明多个组件，或者您可以为每个组件创建一个模块并有选择地导入它们，这就是 angular material 所做的（MatButtonModule、MatCheckboxModule、 ...)

Angular5、在子模块中使用组件

Angular 5, using a component in a sub-module

angular-routing

angular-module

angular