角2 + Googleマップの場所オートコンプリート、後ろに入力[Dom manupulation]

Question

「Angular 2 + Google Maps Places Autocomplete」を使用しました。 これは、基本的にはそのような入力タイプのテキストです：

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

私はいくつかのテキストを入力した後に表示されるリスト、について知りたいです。カスタマイズした入力フィールドのリストを作成したい。 別の子コンポーネントで入力フィールドを作成した場合、直接ngModelのフォームと検証の機能を適用することはできません。 Googleオートコンプリートのような値を選択するためのリストを表示するには、入力後にいくつかのHTMLを追加します。 jQueryを使用してこれを入力した後でリストを追加しています。お勧めしますか......

Answer 1

HTMLコンポーネントの後に新しいコンポーネントまたはテンプレートを挿入する場合は、ViewContainerRefサービスを使用する必要があります。依存性注入と

取得ViewContainerRef：

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

我々はコンポーネントでサービスを注入しています。この場合、コンテナはホスト要素（vcr要素）を参照し、テンプレートはvcr要素の兄弟として挿入されます。

Answer 2

viewcontainerrefについては非常に詳しい説明があります。それを読んで、たくさんのことを理解するでしょう。