Angular 2 + Mapy Google Miejsca Autouzupełnianie, dołącz po wpisie [Dom manupulation]

Question

Użyłem wyszukiwania "Angular 2 + Google Maps Places Autocomplete". To jest w zasadzie tekst input type tak:

<input placeholder="search your location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" #searching=""> 

Chcę wiedzieć o liście, który pojawia się po wpisaniu jakiegoś tekstu. Chcę utworzyć taką listę dla mojego spersonalizowanego pola wejściowego. Jeśli utworzę pole wejściowe w innym składniku podrzędnym, wówczas nie będę mógł zastosować bezpośrednio funkcji ngModel formularza i sprawdzania poprawności na nim. Dlatego chcę wstawić trochę kodu HTML po wprowadzeniu, aby wyświetlić listę, aby wybrać wartości takie jak autouzupełnianie Google. Zrobiłem to wcześniej z jQuery przez dołączenie listy po wprowadzeniu. Proszę zasugerować mi ......

Answer 1

Jeśli chcesz wstawić nowy komponent lub szablon po komponencie HTML, musisz użyć usługi ViewContainerRef.

Get ViewContainerRef z wtryskiem zależność:

import { Component,ViewContainerRef,ViewChild } from '@angular/core'; 
@Component({ 
    selector: 'vcr', 
    template: ` 
    <ng-template #tpl> 
    <h1>ViewContainerRef</h1> 
    </ng-template> 
    `, 
}) 
export class VcrComponent { 
    @ViewChild('tpl') tpl; 
    constructor(private _vcr: ViewContainerRef) { 
    } 
    ngAfterViewInit() { 
     this._vcr.createEmbeddedView(this.tpl); 
    } 
} 
@Component({ 
    selector: 'my-app', 
    template: `<vcr></vcr>`, 
}) 
export class App { 
} 

Jesteśmy wstrzykiwanie usługę w komponencie. W tym przypadku kontener będzie odnosił się do twojego elementu hosta (element vcr), a szablon zostanie wstawiony jako element równorzędny elementu vcr.

Answer 2

Mam bardzo dokładny opis na viewcontainerref. Przeczytaj to, zrozumiesz wiele rzeczy.