1

Когда код карты Google помещен в приложение Angular2 app.component (как рекомендовано here), все работает нормально. Однако мне не нужна карта в app.component, но в общем вложенном компоненте (google-maps.component). И здесь начинается проблема: карта не отображается.Карты Angular2/Google: карта не отображается, когда во вложенном компоненте

Все должны быть сконфигурированы правильно, как:

А. Когда код из фрагмента (2) перемещается в (app.component.html) карта отображается правильно

Б. h1 текст тега (от 2 фрагмента ниже) отображается на нужном месте на отображаемой странице, где селектор Google-карте компонента размещен

C. В консоли объект окна имеет свойство .google.map

... поэтому вопрос должен относиться к загрузке карты/рендеринг

Q: Что может сделать карту шоу Google корректно при использовании из проверяемых компонента?

Вот разбивка кода, используемого:

(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. ц

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

ответ

0

Un-чертов-правдоподобно: отсутствующий '' (Точка) в селекторе CSS

неправильно: sebm-Google-карта-контейнер {...}

правильно: .sebm-Google-карта-контейнер {...}