Angular 5，使用子模块中的组件 [英] Angular 5, using a component in a sub-module

问题描述

当我将应用细分为延迟加载效率时，出现了我似乎无法纠正的错误 并为"child"使用子路由器，
我需要使用主应用程序中使用的组件.

I am getting an error I cannot seem to remedy, when I sub-divided my app for lazy loading efficiencies and and using a sub-router for "child",
I need to use a component that is used in the main app.

但是我收到以下错误消息

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

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的位置(未将其导入到主路由器，而是通过其选择器进行调用...)

Where AccountInfoComponent is declaired in the main module (it is not imported to the main router, it is called via it's selector...)

因此，我将子级"组件移到了自己的模块中，并带有一个路由器(用于子级)和延迟加载

So I moved my "child" component into its own module, complete with a router (for children) and lazy loading

我的"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 declairs AccountInfoComponent，因为它在user.component中使用.

The main app.module declairs AccountInfoComponent because it is used in user.component.

我尝试将AccountInfoComponent导入子路由器，并尝试从主模块中将其导出.

I have tried importing AccountInfoComponent into the child router, I have tried exporting it from the main module.

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

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

推荐答案

实际上，您不能在一个以上的模块中声明一个组件

Indeed you cannot declare a component in more than one module

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

You can create a shared module that will contain the components that you want to reuse in more than one module.

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

This shared module in your example could declare and export the AccountInfoComponent, and other components that you'll need to reuse in different modules.

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

您可以在共享模块中声明多个组件，也可以为每个组件创建一个模块并有选择地导入它们，这是棱角材质的作用(MatButtonModule，MatCheckboxModule，...)

You can declare multiple components in your shared module, or you can create one module per component and import them selectively, which is what angular material does (MatButtonModule, MatCheckboxModule, ...)

这篇关于Angular 5，使用子模块中的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！