Angular2 RC6 父子組件

Question

我查看了其他 Angular2 RC6 父子帖子，但沒有一個能解決我遇到的問題。

我有導入 HomeModule 的主 AppModule。 這似乎有效。 現在我添加了一個 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 **

---

我添加了一個 plunker 帖子來復制我的問題。 http://plnkr.co/edit/7M71N6ttYR2s9yNdB3UT?p=preview

Answer 1

請注意，只有app.module應該導入BrowserModule並具有bootstrap屬性。 你能從模塊中刪除那些，看看是否有幫助？ 繼續像在MapModule為所有非app.module模塊導入CommonModule一樣。

此外，無需重復導入FormsModule 、 HttpModule和ReactiveFormsModule 。 app.module導入它們就足夠了。

ps 抱歉評論然后回答，我在回答框中的 chrome 中有一個奇怪的錯誤，由於某種原因導致標題窗格在框上復制自己:(

Answer 2

我找到了我的問題的解決方案。 我需要將導出添加到我的 MapModule，以便其他組件可以使用該組件。 我的最終更改是 MapModule 如下

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

出口：[地圖組件]