Angular2:组件不是任何模块的一部分

Question

我有一个工作的ionic/firebase应用程序,现在想要创建一个具有相同功能的Web应用程序.我从这个模板开始:https: //github.com/ng-lisbon/angular-firebase-seed.它是Angular 4,Firebase 3.9.

现在的问题是我想使用@input将数据从父组件传递给它的子组件.关于这一点,有很多不同的教程和线程,但我没有看到我的代码中出错了.

父HTML:

<app-child [message]="parentMessage"></app-child>

家长TS:

@Component({
    selector: 'app-tester',
    templateUrl: './collections.component.html',
    styles: [],
})
export class CollectionComponent implements OnInit {
    userEmail = '';
    alerts = [];
    collections = [];
    childData: any;

  parentMessage = "message from parent"

@Input() message: any;

    constructor(...) { 
        ...
    }

    ngOnInit() {
    }
}

儿童HTML:

{{message}}

儿童TS:

@Component({
    selector: 'app-child',
    templateUrl: './collectioninfo.component.html',
    styles: []
})
export class CollectionInfo implements OnInit {
    @Input() message: string;

    constructor(...) { 

    ngOnInit() {}
}

我收到错误消息"错误:组件CollectionComponent不是任何NgModule的一部分或模块尚未导入您的模块." 由于错误表明我搞乱了导入和模块的东西.

app.module.ts:

import ...
import { CollectionComponent } from 
'./collections/collections.component';
import { CollectionInfo } from './collections/collectioninfo.component';

@NgModule({
  declarations: [
    AppComponent,
    ...
    CollectionInfo,
    CollectionComponent
  ],
  imports: [
  ],
  providers: [
    CollectionComponent
  ],
  exports: [
    CollectionComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

collectionsmodule.ts

import ...

@NgModule({
  declarations: [
  ],
  imports: [
  ]
})
export class ProfileModule {}

这个绝对搞砸了:"导出类ProfileModule"显然没有任何意义.我从种子模板的另一个组件复制它.但是,当我现在将其重命名为"CollectionsModule"时,它会抛出另一个错误:

Error: Cannot find 'ProfileModule' in 'app/collections/collections.module'

看起来"ProfileModule"是在其他地方导入的,但我找不到哪里.也不确定这是否真的影响"不是任何NgModule的一部分" - 错误.

我在Angular 4中读到了这个非常好的模块摘要,但我仍然无法解决我的问题.

非常感谢你的帮助.

Answer 1

您需要在declarations不在内部添加组件Providers

@NgModule({
  declarations: [
    AppComponent,
    ...
    CollectionInfo,
    CollectionComponent
  ],
  imports: [
  ],
  providers: [
    //remove this CollectionComponent
  ],
  exports: [
    CollectionComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }