Anwenden von Skript zur Eingabe auf Angular 2

Question

Ich möchte Place Autocomplete von Google zu einer Eingabe verwenden, die Teil einer Angular 2-Vorlage ist. Ich weiß, dass ich mit ElementRef auf das Element zugreifen kann, aber es scheint nicht der beste Weg zu sein und ich möchte mein Bestes geben. Um einen anderen Ansatz zu testen, statt der Suche nach dem Elemente, das ich das Skript anwenden mag ich ein Click-Ereignis wie folgt verwendet:

<input type="text" id="city" (click)="initializeCityInput($event)" /> 

Dann auf meiner Winkelkomponente ich habe:

initializeCityInput(event) { 
    let input: HTMLInputElement = event.currentTarget; 
    let options = { 
     types: ['(cities)'], 
     componentRestrictions: { country: 'au' } 
    }; 
    let autocomplete = new this.w.google.maps.places.Autocomplete(input, options); 
} 

Diese funktioniert ziemlich gut! Aber die Sache ist, dass ich auf meine Eingabe klicken muss, um das Autocomplete-Skript zu laden.

Gibt es irgendein Ereignis wie 'Laden' für Eingaben oder Workaround, so dass das Skript sofort geladen wird?

Answer 1

Wenn Sie zu einem Element in Ihrer Vorlage eine Vorlagenvariable (myInput) hinzufügen, können Sie mit @ViewChild('myInput') auf dieses Element zugreifen. Es gibt eine ElementRef und seine nativeElement ist ein Verweis auf Ihr Eingangselement:

@Component({ 
    selector: '...', 
    template: ` 
    <input #myInput type="text" id="city" /> 
    ` 
}) 
class MyAutoComplete { 
    @ViewChild('myInput') myInput; 

    ngAfterViewInit() { 
    this.initializeCityInput(myInput) 
    } 

    initializeCityInput(event) { 
    let options = { 
     types: ['(cities)'], 
     componentRestrictions: { country: 'au' } 
    }; 
    let autocomplete = new this.w.google.maps.places.Autocomplete(myInput.nativeElement, options); 
    } 
} 

Siehe auch angular 2/typescript : get hold of an element in the template