Angular 2 + Google Maps Orte Autocomplete, anhängen nach Eingabe [Dom-Manu]

Question

Ich habe "Angular 2 + Google Maps Places Autocomplete" Suche verwendet. Es ist im Grunde ein Eingabetyp Text wie folgt aus:

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

ich über die Liste wissen wollen, die nach der Eingabe einen Text erscheint. Ich möchte eine solche Liste für mein benutzerdefiniertes Eingabefeld erstellen. Wenn ich das Eingabefeld in einer anderen untergeordneten Komponente erstellen, kann ich keine direkten ngModel-Funktionen von Formularen und Validierungen darauf anwenden. Also ich möchte etwas HTML nach der Eingabe anhängen, um die Liste anzuzeigen, um Werte wie Google Autocomplete auszuwählen. Ich habe dies zuvor mit jQuery getan, indem ich eine Liste nach der Eingabe angehängt habe. Bitte schlagen Sie mir vor ......

Answer 1

Wenn Sie eine neue Komponente oder Vorlage nach der HTML-Komponente einfügen möchten, müssen Sie den ViewContainerRef-Dienst verwenden.

Get ViewContainerRef mit Dependency Injection:

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 { 
} 

Wir sind in der Komponente den Dienst zu injizieren. In diesem Fall verweist der Container auf Ihr Host-Element (das vcr-Element) und die Vorlage wird als gleichrangiges Element des vcr-Elements eingefügt.

Answer 2

Ich habe eine sehr tiefe Beschreibung auf viewcontainerref. Lesen Sie es, Sie werden viele Dinge verstehen.