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的子项，那么我会看到地图。

任何线索？

**** ****编辑

感谢您的评论到目前为止。我的代码现在看起来更干净我已根据评论应用了以下更改，但错误仍然相同。我的新代码如下所示。

// ----------
// 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 **

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

Answer 1

请注意，只有app.module应导入BrowserModule且具有bootstrap属性。你能从模块中删除它们，看看它是否有帮助？继续导入CommonModule，就像MapModule中所有非app.module模块一样。

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

P.S。抱歉评论然后回答，我在答案框中的chrome中有一个奇怪的错误，由于某种原因导致标题窗格在框上复制自己:(

this answer

Answer 2

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

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

出口：[MapComponent]

Angular2 RC6父子组件

2 个答案: