कोणीय 2 + Google मानचित्र स्थान स्वत: पूर्ण, इनपुट के बाद संलग्न करें [डोम मैन्युफ्यूलेशन]

Question

मैंने "कोणीय 2 + Google मानचित्र स्थान स्वत: पूर्ण" खोज का उपयोग किया है। यह मूल रूप से इस तरह एक इनपुट प्रकार पाठ है:

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

मैं सूची है, जो कुछ पाठ लिखने के बाद प्रकट होता है के बारे में जानना चाहते हैं। मैं अपने अनुकूलित इनपुट फ़ील्ड के लिए ऐसी सूची बनाना चाहता हूं। यदि मैं एक अलग बच्चे घटक में इनपुट फ़ील्ड बनाता हूं तो मैं उस पर फॉर्म और सत्यापन की प्रत्यक्ष ngModel सुविधाओं को लागू करने में सक्षम नहीं होगा। तो मैं Google Autocomplete जैसे मानों को चुनने के लिए सूची दिखाने के लिए इनपुट के बाद कुछ 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 पर बहुत गहरा विवरण मिला। इसे पढ़ें, आप बहुत सी बातें समझेंगे।