Angular2 / Google地图：在嵌套组件中时地图不显示答案

【问题标题】：Angular2 / Google maps: map not showing when in nested componentAngular2 / Google地图：在嵌套组件中时地图不显示
【发布时间】：2017-06-09 07:06:27
【问题描述】：

当 Google 地图代码放在 Angular2 app.component 中时（推荐 here），一切正常。但是，我不需要 app.component 中的地图，而是共享可嵌套组件（google-maps.component）中的地图。 问题开始了：地图没有显示。

都应该正确配置为：

A.当 sn-p(2) 中的代码移动到 (app.component.html) 地图显示正确

B. h1 标签文本（来自下面的 sn-p 2）是显示在渲染页面的正确位置，放置 google-maps 组件选择器

C.在控制台中，窗口对象有 .google.map 属性

...所以问题应该与地图加载/渲染有关

问：在可测试组件中使用时，什么可以使谷歌地图正确显示？

以下是所用代码的细分：

(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  { }

【问题讨论】：

标签： angular typescript google-maps-api-3 nested angular-components

【解决方案1】：

难以置信：一个缺失的 '.' css 选择器中的（点）

错误： sebm-google-map-container { ... }

正确： .sebm-google-map-container { ... }

【讨论】：