Angular 2 вызывает дочерний селектор из одного дочернего модуля в дочерний модуль

У меня есть структура каталогов:

|-resources
   |-views
      |-Typescript
         |-App
            |-app.module.ts
            |-app.component.ts
|-Modules
   |-Core
      |-Assets
         |-Typescript
            |-core.module.ts
            |-core.component.ts
   |-Category
      |-Assets
         |-Typescript
            |-category.module.ts
            |-category.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CoreModule } from '../../../../Modules/Core/Assets/Typescript/core.module';
import { CategoryModule } from '../../../../Modules/Category/Assets/Typescript/category.module ';

@NgModule({
    imports: [
        BrowserModule,
        CoreModule,
        CategoryModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {
}

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    template: `<app-main></app-main>`
})

export class AppComponent {
}

core.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreComponent } from './core.component';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        CoreComponent
    ],
    exports: [
        CoreComponent
    ]
})

export class CoreModule {
}

core.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-main',
    template: `<category></category>`
})

export class CoreComponent {}

category.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CategoryComponent } from './category.component';

@NgModule({
    imports: [ CommonModule ],
    declarations: [ CategoryComponent ],
    exports: [ CategoryComponent ]
})

export class CategoryModule {}

category.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'category',
    template: `This is a category.`
})

export class CategoryComponent {
}

Я хочу позвонить category selector на category.component.ts от core.component.ts который находится на том же уровне, что и категория, т.е. дочерний модуль основного app.module ,

Можно ли вызвать компонент, который не определен в другом модуле, только добавив модуль в список родительских модулей?

Изменить: я получаю эту ошибку:

Unhandled Promise rejection: Template parse errors:
'category' is not a known element:
1. If 'category' is an Angular component, then verify that it is part of this module.

2 ответа

Решение

Как CategoryComponent был использован CoreModule(который является независимым модулем), он должен быть включен в imports из CoreComponent, Иначе CoreModule компоненты не будут знать о CategoryModule компоненты.

Код

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreComponent } from './core.component';
import { CategoryModule } from 
              '../../../../Modules/Category/Assets/Typescript/category.module ';

@NgModule({
    imports: [
        CommonModule,
        CategoryModule //<-- add here
    ],
    declarations: [
        CoreComponent
    ],
    exports: [
        CoreComponent
    ]
})

export class CoreModule {
}

И CategoryModule не будет использоваться AppModule затем удалите его из AppModule импорт.

Обновите свой core.module.ts файл для импорта CategoryModule:

@NgModule({
    imports: [
        CommonModule,
        CategoryModule
    ],
    declarations: [
        CoreComponent
    ],
    exports: [
        CoreComponent
    ]
})

export class CoreModule {
}
Другие вопросы по тегам