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的一部分” - 错误。

我看了this very good summary of modules in Angular 4，但我仍然无法解决问题。

非常感谢你的帮助。

Answer 1

您需要在 declarations 下添加 Providers

内的组件

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

Answer 2

原来我的app.routing.ts中有一个错误：

const APP_ROUTES: Routes = [
    { path: 'collections', loadChildren: 'app/collections/collections.module#ProfileModule' }
]

所以我试着加载一个在这个文件中不存在的模块（想想Angular的错误信息可能会更清楚一些）。此外，我不得不将我的代码更改为

const APP_ROUTES: Routes = [
    { path: 'collections', component: CollectionComponent }
]

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

2 个答案: