Question

当Google地图代码放在Angular2 app.component中时（按照推荐here），一切正常。但是，我不需要app.component中的地图，而是需要共享的可嵌套组件（google-maps.component）。 这里遇到麻烦：地图没有显示。

所有应正确配置为：

一个。将代码段（2）中的代码移动到（app.component.html）时地图正确显示

B中。 h1标签文本（来自下面的代码段2）是显示在渲染页面上的正确位置，其中放置了google-maps组件选择器

℃。在控制台中，window对象具有.google.map 财产

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

有关

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

以下是所用代码的细分：

（1）google-maps.component。 css

＆＃13;

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

＆＃13;

（2）google-maps.component。 html

＆＃13;

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

＆＃13;

（3）google-maps.component。 ts

＆＃13;

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

＆＃13;

（4）app.module。 ts

＆＃13;

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

＆＃13;

Answer 1

不血腥可信：一个失踪的人。＆＃39; css选择器中的（点）

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

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

Angular2 / Google maps：在嵌套组件中不显示地图

1 个答案: