Angular 2 + Google Maps Places Autocomplete，在输入后追加 [Dom 操作]

Posted 2023-02-24

【中文标题】Angular 2 + Google Maps Places Autocomplete，在输入后追加 [Dom 操作]

【英文标题】：Angular 2 + Google Maps Places Autocomplete, append after Input [Dom manupulation]

【发布时间】：2017-11-13 18:24:08

【问题描述】：

我使用了“Angular 2 + Google Maps Places 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 上得到了非常深刻的描述。阅读它，你会明白很多事情。