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

我想从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.的子模块。

是否可以通过仅将模块添加到父模块列表来调用未在另一个模块中定义的组件？

编辑：我收到了这个错误：

$(td).empty().append("hello");

Answer 1

CategoryComponent已使用CoreModule（这是一个独立的模块），它应该包含在imports的{{1}}中。否则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导入中删除。

Answer 2

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

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

export class CoreModule {
}

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

2 个答案: