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 声明 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

您可以在共享模块中声明多个组件，也可以为每个组件创建一个模块并有选择地导入它们，这就是 angular material 的作用 (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屋！