2017-11-13 101 views
12

"Köşeli 2 + Google Haritalar Rehber Otomatik Tamamlama" aramasını kullandım. Temelde böyle bir giriş tipi metindir:Köşeli 2 + Google Haritalar Rehber Otomatik Tamamlama, Giriş Sonrası Ekleme [Dom Manupülasyonu]

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

Bazı metin yazıldıktan sonra görüntülenen listeden, hakkında bilmek istiyorum. Özelleştirilmiş giriş alanım için böyle bir liste oluşturmak istiyorum. Girdi alanını farklı bir alt bileşende oluşturursam, form ve doğrulamaların doğrudan ngModel özelliklerini uygulayamayacağım. Dolayısıyla, Google Otomatik Tamamlama gibi değerleri seçmek üzere listeyi göstermek için girdikten sonra bazı HTML eklemek istiyorum. Bunu girdikten sonra bir listeye ekleyerek jQuery ile daha önce yaptım. HTML bileşeni sonra yeni bir bileşen veya şablon eklemek istiyorsanız ......

+0

Ayrıca indeksi de kullanmalıyım, kullanmayı denedim ama sonucu etkilemiyor. –

cevap

9

Lütfen beni öneririz, sen ViewContainerRef servisini kullanmak gerekir. bağımlılık enjeksiyon ile

alın 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 { 
} 

Biz bileşeninde hizmet enjekte edilir. Bu durumda, kapsayıcı ana makinenize (vcr öğesi) başvurur ve şablon vcr öğesinin bir kardeşi olarak eklenir.

6

viewcontainerref üzerinde çok derin bir açıklama aldım. Oku, birçok şeyi anlayacaksın.

İlgili konular