Question

当我将我的应用程序细分为延迟加载效率时，我收到的错误似乎无法解决并使用"child"的子路由器，我需要使用主应用程序中使用的组件。

但我收到以下错误消息

类型AccountInfoComponent是2个模块
的声明的一部分

我的应用结构如下所示

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.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导入子路由器，我尝试从主模块导出它。

问题：如何在多个模块中使用组件？主应用程序和嵌套模块？

Answer 1

实际上，您无法在多个模块中声明组件

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

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

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

您可以在共享模块中声明多个组件，或者您可以为每个组件创建一个模块并有选择地导入它们，这就是角度材质的作用（MatButtonModule，MatCheckboxModule，...）< / p>

Angular 5，使用子模块中的组件

1 个答案: