Góc 2 + Google Maps Địa điểm Tự động điền, nối sau khi nhập [Dom manupulation]

Question

Tôi đã sử dụng tìm kiếm "Angular 2 + Google Maps Places Autocomplete". Về cơ bản, văn bản kiểu nhập văn bản như sau:

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

Tôi muốn biết về danh sách xuất hiện sau khi nhập một số văn bản. Tôi muốn tạo danh sách như vậy cho trường nhập tùy chỉnh của tôi. Nếu tôi tạo trường nhập trong một thành phần con khác thì tôi sẽ không thể áp dụng các tính năng ngModel trực tiếp của biểu mẫu và xác thực hợp lệ trên đó. Vì vậy, tôi muốn nối thêm một số HTML sau khi nhập để hiển thị danh sách để chọn các giá trị như Google Autocomplete. Tôi đã làm điều này trước đây với jQuery bằng cách thêm một danh sách sau khi nhập. Vui lòng đề nghị tôi ......

Answer 1

Nếu bạn muốn chèn thành phần hoặc mẫu mới sau thành phần HTML, bạn cần sử dụng dịch vụ ViewContainerRef.

Nhận ViewContainerRef với dependency injection:

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 { 
} 

Chúng tôi đang tiêm dịch vụ trong thành phần. Trong trường hợp này, vùng chứa sẽ tham chiếu đến phần tử máy chủ lưu trữ của bạn (phần tử vcr) và mẫu sẽ được chèn dưới dạng anh chị em của phần tử vcr.

Answer 2

Tôi có mô tả rất sâu trên viewcontainerref. Đọc nó, bạn sẽ hiểu rất nhiều thứ.