Angular2：用于路由的共享组件

Question

我正在使用一个组件在 2 个单独的模块中进行路由。 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 { }

`

产品组件由这 2 个模块共享

有什么想法吗？

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

多亏了 Fateh Mohamed，我才开始工作

...
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：用于路由的共享组件

Angular2: Shared component thats used for routing

angular2-routing

angular