Angular 2 + Автозаполнение объектов Google Maps, добавление после входа [Dom manupulation]

Я использовал поиск Angular 2 + Google Maps Locals Autocomplete ". В основном это текст типа ввода:

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

Я хочу знать о списке, который появляется после ввода некоторого текста. Я хочу создать такой список для своего настраиваемого поля ввода. Если я создаю поле ввода в другом дочернем компоненте, то я не смогу применить к нему прямые функции ngModel формы и проверки. Поэтому я хочу добавить некоторый HTML после ввода, чтобы показать список, чтобы выбрать такие значения, как автозаполнение Google. Я сделал это раньше с помощью jQuery, добавив список после ввода. Пожалуйста, предложите мне......

Ответ 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.

Ответ 2

Я получил очень глубокое описание viewcontainerref. Прочтите это, вы поймете многое.