각도 2 + Google지도 장소 자동 완성, 추가 입력 [Dom manupulation]

Question

"Angular 2 + Google지도 장소 자동 완성"검색을 사용했습니다. 그것은 기본적으로 같은 입력 텍스트를 입력입니다 :

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

내가 텍스트를 입력 한 후 나타나는 목록에 대해 알고 싶어요. 내 사용자 정의 입력 필드에 대한 목록을 만들고 싶습니다. 다른 하위 구성 요소에 입력 필드를 만들면 직접 ngModel의 양식 및 유효성 검사 기능을 적용 할 수 없습니다. 그래서 입력 후 일부 HTML을 추가하여 Google 자동 완성과 같은 값을 선택하는 목록을 표시하고 싶습니다. 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에 대해 매우 자세히 설명했다. 그것을 읽어라, 당신은 많은 것을 이해할 것이다.