Angular 2 + Google Maps Places 自动完成，在输入后追加 [Dom 操作]

Question

我使用了“Angular 2 + Google Maps Places Autocomplete”搜索。它基本上是这样的输入类型文本:

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

我想了解在输入一些文本后出现的列表。我想为我的自定义输入字段创建这样的列表。如果我在不同的子组件中创建输入字段，那么我将无法在其上应用表单的直接 ngModel 功能和验证。所以我想在输入后附加一些 HTML 以显示列表以选择值，如谷歌自动完成。我之前通过在输入后附加一个列表来使用 jQuery 完成此操作。请建议我......

Answer 1

如果要在HTML组件后插入新的组件或模板，需要使用ViewContainerRef服务。

通过依赖注入(inject)获取 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 {
}

我们正在组件中注入(inject)服务。在这种情况下，容器将引用您的宿主元素(vcr 元素)并且模板将作为 vcr 元素的同级元素插入。