Question

我是Angular的新手，虽然已经使用了AngularJs一段时间了。我决定转换到Angular并一直关注the style guide。

我已经设置了这样的模块（为了简洁，我没有显示我的组件，但它们应该是自我解释的）

/app.module.ts

/core/core.module.ts

/data/data.module.ts

/directives/directives.module.ts

/home/home.module.ts

/results/results.module.ts

基本上，我使用核心模块来处理所有其他模块。它看起来像这样：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { DataModule } from '../data/data.module';
import { DirectivesModule } from '../directives/directives.module';
import { HomeModule } from '../home/home.module';
import { SharedModule } from '../shared/shared.module';
import { QuestionModule } from '../question/question.module';
import { ResultsModule } from '../results/results.module';

import { HomeComponent } from '../home/home.component';
import { ResultsComponent } from '../results/results.component';

@NgModule({
  imports: [
    DataModule,
    DirectivesModule,
    SharedModule,

    HomeModule,
    QuestionModule,
    ResultsModule,

    RouterModule.forRoot([
      { path: 'results', component: ResultsComponent },
      { path: 'home', component: HomeComponent },
      { path:'', redirectTo: 'home', pathMatch: 'full' }
    ])
  ],
  declarations: []
})
export class CoreModule { }

在我的 app 模块中，我试图将其保持在较小的位置，所以它看起来像这样：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { CoreModule } from './core/core.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent   
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题是，当我运行我的网站时，我收到错误，指出无法找到问题组件。此外，它也呻吟着我的指令也没有找到。

我认为在各自的模块中声明组件/指令并将所有模块导入核心模块然后导入到app模块中将允许所有组件访问指令等。

应用程序组件使用数据服务并且工作正常，所以我只是不明白其他人为什么会失败。

有人可以帮助我吗？

Answer 1

我认为您忘记了模块中的export组件。即在模块定义中，您必须再提供一个导出数组

exports:[coponent want to export]

所以在questionmodule你必须写这个。

@NgModule({
  declarations: [QustionComponent, other component],
  imports: [module toimport ],
  providers: [service provider],
  exports:[QuestionComponent, other coponent you want to export ]
})

Answer 2

在Angular中，您必须导出可重复使用的组件。

例如，指令，组件和管道是您可以重复使用的组件。

如果您希望它工作，只需在相关模块中添加exports属性（CoreModule和DirectivesModule），它将包含您的QuestionComponent，所有指令。

（请记住，您需要导出导入的组件;这意味着您必须先在同一模块中导入它）

Angular4模块范围不起作用

2 个答案: