Angular2 RC6 父子组件

Question

我查看了其他 Angular2 RC6 父子帖子，但没有一个能解决我遇到的问题。

我的主 AppModule 导入了 HomeModule。这似乎行得通。现在我添加了一个 MapModule，它实现了 angular2-google-maps 作为导入到我的 HomeModule 中，我收到了错误：

'google-map' is not a known element:
1. If 'google-map' is an Angular component, then verify that it is part of this module.
2. If 'google-map' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<h1>home</h1>[ERROR ->]<google-map></google-map>"): HomeComponent@0:13

这是我的设置：

// ----------
// AppModule
// ----------
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HomeModule,
        routing
    ],
    declarations: [
        AppComponent,
    ],
    // schemas: [CUSTOM_ELEMENTS_SCHEMA],
    providers: [
        {provide: APP_BASE_HREF, useValue : '/' },
        {provide: LocationStrategy, useClass: HashLocationStrategy}
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

// ----------
// HomeModule
// ----------
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        MapModule,
    ],
    declarations: [
        HomeComponent
    ],
    bootstrap: [HomeComponent]
})
export class HomeModule {}

// ----------
// HomeComponent
// ----------
@Component({
    selector: 'home',
    template: "<h1>home</h1><google-map></google-map>",
    styleUrls: ['home.scss'],
})
export class HomeComponent {}

// ----------
// MapModule
// ----------
@NgModule({
    imports: [
        BrowserModule,
        CommonModule,
        FormsModule,
        AgmCoreModule.forRoot({
            apiKey: '<my-api-key>'
        })
    ],
    declarations: [MapComponent],
    providers: [MapService],
    bootstrap: [MapComponent]
})
export class MapModule {}

// ----------
// Map Component
// ----------
@Component({
    selector: 'google-map',
    templateUrl: 'map.component.html',
    styleUrls: ['map.scss']
})
export class MapComponent {}

将 CUSTOM_ELEMENTS_SCHEMA 添加到模块可以消除错误，但地图不会呈现。

如果我直接将 MapModule 作为 AppModule 的一部分而不是作为 HomeModule 的子级，那么我会看到地图。

有什么线索吗？

---

****编辑****

---

感谢到目前为止的 cmets。我的代码现在看起来更干净了。我已经根据 cmets 应用了以下更改，但错误保持不变。我的新代码如下所示。

// ----------
// AppModule
// ----------
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        HomeModule,
        routing
    ],
    declarations: [
        AppComponent,
    ],
    // schemas: [CUSTOM_ELEMENTS_SCHEMA],
    providers: [
        {provide: APP_BASE_HREF, useValue : '/' },
        {provide: LocationStrategy, useClass: HashLocationStrategy}
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

// ----------
// HomeModule
// ----------
@NgModule({
    imports: [
        CommonModule,
        MapModule,
    ],
    declarations: [
        HomeComponent
    ]
})
export class HomeModule {}

// ----------
// HomeComponent
// ----------
@Component({
    selector: 'home',
    template: "<h1>home</h1><google-map></google-map>",
    styleUrls: ['home.scss'],
})
export class HomeComponent {}

// ----------
// MapModule
// ----------
@NgModule({
    imports: [
        CommonModule,
        AgmCoreModule.forRoot({
            apiKey: '<my-api-key>'
        })
    ],
    declarations: [MapComponent],
    providers: [MapService]
})
export class MapModule {}

// ----------
// Map Component
// ----------
@Component({
    selector: 'google-map',
    templateUrl: 'map.component.html',
    styleUrls: ['map.scss']
})
export class MapComponent {}

此外，我查看了提供给其他 Stack Overflow 问题的链接，我注意到他们有一个父子示例，但在他们的示例中，孩子没有与之关联的模块。我的示例中的 MapComponent 与 angular2-google-map 模块的关系非常复杂，并且似乎它应该有自己的模块来处理它。

---

** 编辑 2 **

---

我添加了一个 plunker 帖子来复制我的问题。 http://plnkr.co/edit/7M71N6ttYR2s9yNdB3UT?p=preview

Answer 1

请注意，只有 app.module 应该导入 BrowserModule 并具有 bootstrap 属性。您可以从模块中删除它们，看看是否有帮助？像在 MapModule 中对所有非 app.module 模块所做的那样，继续导入 CommonModule。

此外，无需重复导入 FormsModule、HttpModule 和 ReactiveFormsModule。 app.module 导入它们就足够了。

附言很抱歉发表评论然后回答，我在答案框中的 chrome 中有一个奇怪的错误，由于某种原因导致标题窗格在框上复制自身:(

Answer 2

我找到了解决问题的方法。我需要将导出添加到我的 MapModule，以便其他组件可以使用该组件。我最后的改变是 MapModule 如下

// ----------
// MapModule
// ----------
@NgModule({
    imports: [
        CommonModule,
        AgmCoreModule.forRoot({
            apiKey: '<my-api-key>'
        })
    ],
    declarations: [MapComponent],
    exports: [MapComponent],
    providers: [MapService]
})
export class MapModule {}

导出：[MapComponent]