0

我有一个目录结构：

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

核心模块.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 {
}

核心组件.ts

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

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

export class CoreComponent {}

类别.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 {}

类别.component.ts

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

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

export class CategoryComponent {
}

我想调用与类别相同级别的category selectoron category.component.ts，core.component.ts即 main 的子模块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.
4

2 回答 2

1

正如（这是独立模块）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导入中删除。

于 2016-11-29T05:01:18.273 回答
1

更新core.module.ts要导入的文件CategoryModule：

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

export class CoreModule {
}
于 2016-11-29T05:02:20.820 回答