Angular2: общий компонент, используемый для маршрутизации - PullRequest
Новая
       7

Angular2: общий компонент, используемый для маршрутизации

0 голосов
/ 16 мая 2018

Я использую компонент для маршрутизации в 2 отдельных модуля. Angular выдает ошибку около 2 объявлений. Как я могу сделать это общим?

Типичные руководства для общих компонентов показывают, как совместно использовать, но не использовать в модуле для маршрутизации.

Я хочу использовать ProductComponent в 2 отдельных модулях, но компонент используется для маршрутизации, поэтому типичная стратегия общих компонентов не работает.

Маршрутизация:

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 модулями

Есть идеи?

Ответы [ 4 ]

0 голосов
/ 16 мая 2018

Благодаря Фатеху Мохамеду я получил его на работу 

...
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 { }
0 голосов
/ 16 мая 2018

вы не можете объявить один компонент в двух модуле.

Вы либо объявляете это в одном модуле, а затем экспортируете его и используете в другом модуле. или вы создаете новый общий модуль, который будет использоваться обоими. 

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

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

и теперь вы можете использовать первый компонент, без проблем, я думаю!

0 голосов
/ 16 мая 2018

Для этого вы должны сделать общий модуль, например, 

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

, а затем импортировать этот модуль в оба модуля 

@NgModule({
     imports: [ SharedProductModule ]
 })
 exports class ExampleModule {}
0 голосов
/ 16 мая 2018

вы можете экспортировать этот компонент в ваш shared.module.ts как этот 

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

после этого вы можете импортировать ваш общий модуль в 2 модуля 

imports:[ 
        SharedModule,
      ]

так что в вашем app.routing.ts вы можете импортировать его, и вам больше не нужно объявлять его в модулях, импортировать ваш компонент в оба файла маршрутизации, что-то вроде этого 

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