Question

我正在使用一个组件在两个独立的模块中进行路由。 Angular会抛出大约2个声明的错误。我该如何分享？

共享组件的典型指南显示如何共享但不在模块中用于路由。

我想在2个独立的模块中使用ProductComponent，但该组件用于路由，因此典型的共享组件策略不起作用。

路由：

EXAMPLE1.module.ts

`

...
import { ProductComponent } from '../../product/product.component';

export const routes:Routes = [
    { path: 'products/:product-slug',  component: ProductComponent },
    other example 1 routes
];

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [
        ProductComponent,
        other example 1 components
    ],
    providers: [
        ...
    ]
})
export class EXAMPLE1 { }

`

EXAMPLE2.module.ts

`

...
import { ProductComponent } from '../../product/product.component';

export const routes:Routes = [
    { path: 'different/:product-slug',  component: ProductComponent },
    other example 2 routes
];

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [
        ProductComponent,
        other example 2 components
    ],
    providers: [
        ...
    ]
})
export class EXAMPLE1 { }

`

产品组件在这两个模块之间共享

有什么想法吗？

Answer 1

您可以在您的shared.module.ts中导出该组件，例如

declarations: [ ProductComponent,
               ...
              ]
exports: [ ProductComponent],

之后，您可以在2个模块中导入共享模块

imports:[ 
        SharedModule,
      ]

所以在你的app.routing.ts中你可以导入它而你不再需要在模块中声明它，在你的两个路由文件中导入你的组件，就像这样

import { ProductComponent } from '../shared/product.component.ts'

Answer 2

你不能在两个模块中声明一个组件。

您可以在一个模块中声明它，然后将其导出并在另一个模块中使用它。或者您创建一个新的共享模块，并将在两者之间共享。

@NgModule({
    declarations: [
        ProductComponent
    ],
    exports: [ProductComponent]
})
export class EXAMPLE1 { }

@NgModule({
    imports: [
        EXAMPLE1 
    ]
})
export class EXAMPLE2 { }

现在您可以使用第一个组件，我猜没问题！

Answer 3

为此你会做一个共享模块，比如

@NgModule({
      declarations: [ ProductComponent ],
      exports:[ ProductsComponent ]
 })
 export class SharedProductModule{}

然后在两个模块中导入该模块

@NgModule({
     imports: [ SharedProductModule ]
 })
 exports class ExampleModule {}

Answer 4

感谢法塔赫·穆罕默德，我得到了它的工作

...
import { SharedModule } from '../../shared/shared.module'; <-- for declerations
import { ProductComponent } from '../../product/product.component'; <-- for routing

export const routes:Routes = [
    { path: 'products/:product-slug',  component: ProductComponent },
    other example 1 routes
];

@NgModule({
    imports: [
        CommonModule,
        SharedModule <----- add shared module
        ...
    ],
    declarations: [
        other example 1 components <-- remove declaration of component
    ],
    providers: [
        ...
    ]
})
export class EXAMPLE1 { }

Angular2：用于路由的共享组件

4 个答案: