Why do I get this error: Can't bind to 'latitude' since it isn't a known property of 'sebm-google-map' when adding the selector tags in Angular 4?

Question

我正在尝试让 angular-google-maps / @agm/core 在我的 Angular 4 安装上工作。

我在组件 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 正常工作，更新选择器标签 很重要。作者还没有更新文档（在post的这一刻）。

上次更新前：

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>

示例设置：

文件：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() {
  }

}

文件：google-maps.component.html

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

文件：google-maps.component.css

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

文件：app.module.ts

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

Answer 2

塞巴斯蒂安，插件的创始人现在已经更新了文档，您可以找到说明here。我之前的回答仍然有效，但您可能会在他的网站上找到更详细的答案。