Angular2/Google maps：ネストされたコンポーネント内にマップが表示されない

Question

GoogleマップコードがAngular2 app.component（推奨here）に配置されていると、すべて正常に動作します。 しかし、app.componentではなく、共有可能なネスト可能コンポーネント（google-maps.component）にマップは必要ありません。 ここでトラブルが始まります。地図は表示されません。

すべてように正しく構成されなければならない：スニペットからのコード（2）マップが適切

B.ザに表示される（app.component.html） に移動したとき

A. （以下スニペット2から）、H1タグのテキストでは、Googleマップのコンポーネントセレクタがコンソールで

C.が配置され、ウィンドウオブジェクトは 性を.google.map有するレンダリングされたページ上の正しい位置に表示 、あります

0テスト可能なコンポーネントから使用されたときに何が正しくグーグルマップのショーをすることができる

...ので、問題は

Qをレンダリング/マップのロードに関連する必要がありますか？

（1）Googleがmaps.component：ここ

は、使用されるコードの内訳です。 CSS

sebm-google-map-container{ 
 
    height: 300px; 
 
}

（2）Googleがmaps.componentを。 HTML

<h1>GOOGLE MAPS COMPONENT START**********</h1> 
 
<sebm-google-map [latitude]="50" [longitude]="50"> 
 
</sebm-google-map> 
 
<h1>GOOGLE MAPS COMPONENT END**********</h1>

（3）Googleがmaps.componentを。 TS

import { Component } from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'google-maps', 
 
    templateUrl: './google-maps.component.html', 
 
    styleUrls: ['./google-maps.component.css'], 
 
}) 
 
export class GoogleMapsComponent {}

（4）app.module。 TS

... 
 
import { AgmCoreModule } from 'angular2-google-maps/core'; 
 
import { GoogleMapsComponent }  from './shared/google-maps.component'; 
 
... 
 
@NgModule({ 
 
    imports: [ AgmCoreModule.forRoot({ apiKey: '...' }), 
 
     RouterModule.forRoot([ ... ])  
 
    ], 
 
    declarations: [ ..., AppComponent, GoogleMapsComponent ], 
 
    bootstrap: [ AppComponent ] 
 
}) 
 
export class AppModule { }

Answer 1

アン流血-信じられる： '' 行方不明CSSセレクタで（ドット）

間違った： sebm-グーグルマップコンテナ{...}

正しい： .sebm-グーグルマップコンテナ{...}