Bind Abfrage Zeichenfolge Params in Angular modellieren 2

Question

Ich habe eine App ähnlich Google Maps. Ich möchte mein Modell mit Abfrage-String-Parametern synchronisieren.

Was meine ich damit?

Angenommen, Sie haben ein einfaches Kartenobjekt. Sie geben die Site ein, und Sie erhalten Standardgrenzen in der Kartenkomponente festgelegt. Aber wenn Sie etwas ändern (Schwenken/Zoomen/etc.), Möchte ich, dass Ihre Änderungen auch in der Abfragezeichenfolge für Standortfreigabesachen festgelegt werden.

Wie wird das richtig gemacht?

Answer 1

Ich werde Ihnen zeigen, wie ich es implementiert habe, aber ich bin mir nicht sicher, ob es ein richtiger Weg ist, es zu tun.

Die Idee ist:

Zuerst habe ich hinzufügen, einen versteckten Eingang die Änderung des Kartenobjekts gleichzeitig aufnehmen:

<input hidden id='hiddenMapValue' #hiddenInput>

#hiddenInput ist es für einen Zweck, und Sie werden es sehen.

Dann weisen bei jeder Karte Objektänderungen, um den Wert zu diesem versteckten Eingang, zum Beispiel:

$("#hiddenMapValue").val(place.geometry.location).trigger('change');

In Ihrer Komponente:

@ViewChild('hiddenInput') hiddenInput: ElementRef; 
ngAfterViewInit(){ 
$(this.hiddenInput.nativeElement).on('change', (e)=>{ 
    this.onInputChanged(e); 
}); 
} 

private onInputChanged(e): void{ 
//This is your changed location value 
console.log(e.target.value); 
} 

@ViewChild('hiddenInput') hiddenInput: ElementRef; sind, wie Sie einen Halt bekommen auf versteckten Eingang #hiddenInput.

Und nein, angular 2 Modell speichert keine Änderungen von jQuery gemacht. Dies ist bisher eine alternative Lösung für dieses Problem.

Ich hoffe, das wird helfen.

Answer 2

Inject in Ihrem Konstruktor:

activatedRoute: ActivatedRoute, 
router: Router 

die URL aktualisieren Sie verwenden können:

this.router.navigate(
    [this.param], 
    { 
    queryParams: { 
     queryParamKey: this.queryParam, 
    } 
    }); 

um Änderungen an der URL abonnieren Ändern Sie verwenden können:

this.activatedRoute.paramMap.subscribe((params: ParamMap) => { 
    // remember to add /:paramKey to your routing! 
    this.param = params.get('paramKey'); 
    this.update(); 
}); 

this.activatedRoute.queryParams.subscribe((params: { [key: string]: any }) => { 
    this.queryParam = params['queryParamKey']; 
}); 

Auf diese Weise können Sie sicherstellen, dass alles in der URL angegeben ist, da alle Ihre Änderungen Push sind ed und durchgezogen.