Angular 2 从一个子模块调用子选择器到子模块

Question

我的目录结构为：

|-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 {
}

我想从 core.component.ts 调用 category.component.ts 上的 category selector，它与类别处于同一级别，即主 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.

Answer 1

由于CategoryComponent已经被CoreModule（独立模块）使用，所以应该包含在CoreComponent的imports中。否则 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 导入中删除。

Answer 2

更新您的 core.module.ts 文件以导入 CategoryModule :

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

export class CoreModule {
}

Angular 2 从一个子模块调用子选择器到子模块

Angular 2 call child selector from one child module into child module

components

angular2-template

typescript2.0

angular2-modules

angular