Angular2雙向綁定在谷歌地圖回調后停止工作

Question

我正在進行角度2應用。 我有一個谷歌地圖，自動完成。 我有一個輸入（使用谷歌自動完成）和一個搜索按鈕。 當我點擊搜索按鈕時，我將輸入數據發送到谷歌地理編碼，並在地圖上放置一個標記。 這聽起來很簡單，但在此之后，angular2數據綁定才停止工作。 輸入沒有得到格式化的地址，addressIsValid沒有打開true。

HTML：

<div class="input-group">
<input autocorrect="off" autocapitalize="off" spellcheck="off" type="text"
       class="form-control" [(ngModel)]="addressInput" #search id="address" (keydown)="addressChanged()">
<div class="input-group-btn">
    <button id="addressSubmitButton" type="submit" class="btn btn-default" [class.btn-success]="addressIsValid"
            (click)="submited(search.value)">
        {{ (addressIsValid ? 'addressInput.success' : 'addressInput.search') | translate }}
    </button>
</div>

碼：

export class AddressInputComponent implements OnInit {
public map: google.maps.Map;
public autocomplete: google.maps.places.Autocomplete;
private geocoder: google.maps.Geocoder = new google.maps.Geocoder();
public marker: google.maps.Marker;
public defaultZoom: number;
public defaultLat: number;
public defaultLng: number;
public errorCode: number;
private addressIsValid: boolean;
@Input('address') private addressInput: string;
@Output() addressUpdated: EventEmitter<string> = new EventEmitter();

@ViewChild("search")
public searchElementRef: ElementRef;

constructor() {
    this.addressIsValid = false;
}

ngOnInit() {
    this.defaultZoom = 7;
    this.defaultLat = 47.338941;
    this.defaultLng = 19.396167;
    this.errorCode = null;

    this.autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
    });

    this._setMapToDefault();

    this.autocomplete.bindTo('bounds', this.map);

    this.autocomplete.addListener('place_changed', () => {
        this.addressInput = this.autocomplete.getPlace().formatted_address;
    })
}

private _setMapToDefault() {
    this.map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: this.defaultLat, lng: this.defaultLng},
        zoom: this.defaultZoom,
        scrollwheel: false,
    });

    this.marker = new google.maps.Marker();
    this.marker.setMap(this.map);
}

submited() {
    this.geocoder.geocode( { 'address': this.addressInput}, (results, status) => {
        if (status == google.maps.GeocoderStatus.OK) {
            setInterval(this._changeInput(results[0]), 200);
        } else {
            this.addressIsValid = false;
            this.errorCode = 1;
            this._setMapToDefault();
        }
    });
}

private _changeInput(result) {
    this.errorCode = null;

    if (result.address_components[0].types[0] != "street_number") {
        this.addressIsValid = false;
        this.errorCode = 2;
        this._setMapToDefault();
        return;
    }

    // jQuery('#address').val(result.formatted_address);
    this.addressInput = result.formatted_address;
    this.addressUpdated.emit(this.addressInput);
    this.addressIsValid = true;

    this.map.setCenter(result.geometry.location);
    this.map.setZoom(17);
    this.marker.setPosition(result.geometry.location);
    this.marker.setVisible(true);
}

private addressChanged() {
    if (this.addressIsValid == true) {
        this.addressIsValid = false;
        this._setMapToDefault();
    }
}

}

Answer 1

由於google.maps使用自己的事件/ addListener調用集，因此不會觸發更改檢測。 這些事件不會被zone.js稱為猴子修補，因此不會在Angular區域中運行，這在邏輯上不會觸發更改檢測周期。

因此，您可以通過在組件中注入ngZone服務來解決此問題，您可以使用run方法重新進入角度區域：

constructor(private ngZone: NgZone) {}

ngOnInit() {
    //...
    this.autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
            this.addressInput = this.autocomplete.getPlace().formatted_address;
        });  
    })
}