爲什麼我得到這個錯誤：由於在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安裝angular2 - 谷歌 - 地圖--save

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

現在經過最新的更新

NPM安裝@ AGM /核心--save

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

示例設置：

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

} 

文件：谷歌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。我之前的回答仍然有效，但您可能會在他的網站上找到更詳細的答案。