Angular 2 + Google Maps Place自动填充,在输入后添加[Dom manupulation]

Question

我使用过"Angular 2 + Google Maps Places Autocomplete"搜索.它基本上是一个输入类型的文本:

<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有一个非常深刻的描述.阅读它,你会理解很多东西.