为什么我会收到此错误:无法绑定到'latitude',因为在Angular 4中添加选择器标记时,它不是'sebm-google-map'的已知属性？

Question

我正试图在我的Angular 4安装上使用angular-google-maps/@ agm/core.

我在组件html文件中有这个:

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

当我运行它时,我收到此错误消息:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'latitude' since it isn't a known property of 'sebm-google-map'.
1. If 'sebm-google-map' is an Angular component and it has 'latitude' input, then verify that it is part of this module.
2. If 'sebm-google-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<sebm-google-map [ERROR ->][latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></se"): ng:///AppModule/GoogleMapsComponent.html@0:17

Answer 1

我发现了错误,我想与您分享我的解决方案.

要获得现在称为@ agm/core的angular2-google-map,更新选择器标记非常重要.作者尚未更新文档(在帖子的这个时刻).

在上次更新之前:

npm install angular2-google-maps --save

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

现在在最新更新后

npm install @ agm/core --save

<sebm-google-map [latitude]="lat" [longitude]="lng">
  <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
</sebm-google-map>

示例设置:

file:google-maps.component.ts

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

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

export class GoogleMapsComponent implements OnInit {
  lat: number = 51.678418;
  lng: number = 7.809007;

constructor() { }

  ngOnInit() {
  }

}

file:google-maps.component.html

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

file:google-maps.component.css

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

file:app.module.ts

import { AgmCoreModule } from '@agm/core';
@NgModule({imports: [AgmCoreModule.forRoot()}]]