Angular 2 将 DOM 插入到由 Google Maps V3 api 创建的 InfoWindow 元素中答案

【问题标题】：Angular 2 Insert DOM into InfoWindow element that was created by Google Maps V3 apiAngular 2 将 DOM 插入到由 Google Maps V3 api 创建的 InfoWindow 元素中
【发布时间】：2016-07-27 13:25:33
【问题描述】：

我正在使用 Angular 2 中的 Google Maps V3，我目前正在尝试找到一种解决方案，用于使用绑定链接和输入值填充 InfoWindows。创建 InfoWindow 元素时，它是一个新的 DOM 元素，根据 Angular 2 文档，不支持绑定到应用程序初始化时不存在的 DOM 元素。有没有办法将绑定元素插入或注入到新创建的 DOM 中，或者有一个预先创建的元素包含可以移动到 InfoWindow 中的绑定元素？

【问题讨论】：

标签： google-maps google-maps-api-3 angular

【解决方案1】：

我猜，在这种情况下你应该使用动态组件创建。只需在您的服务或组件中尝试这样的事情，它知道何时必须呈现您的内容：

import {ComponentResolver, ComponentFactory, ComponentRef, ApplicationRef, Injector} from '@angular/core';

export class SomeServiceOrComponent {
  constructor(private resolver:ComponentResolver, private injector:Injector, private appRef:ApplicationRef) {
  }

  renderComponent() {
    return this.resolver
        .resolveComponent(YourDynamicComponentClass)
        .then((factory:ComponentFactory<YourDynamicComponentClass>) => {
            let cmpRef:ComponentRef<YourDynamicComponentClass> =
                factory.create(this.injector, null, '.infoWindowsDOMSelector');
            (<any>this.appRef)._loadComponent(cmpRef);
            return cmpRef;
        });
  }
}

只要调用这个方法，不管你需要它。

(<any>this.appRef)._loadComponent(cmpRef) 是 RC 以前版本的一个技巧，但也许很快就会解决

【讨论】：

我对 Angular 还是比较陌生，所以请原谅我的无知。这个例子会被内置到现有的类中，还是 SomeServiceOrComponent 是指用于呈现动态内容的实用服务？
啊，我搞定了，谢谢你的帮助。我想现在唯一的问题是如何使用这种方法将数据从父组件作为@Input 传递给新组件？
让这个工作也购买添加 cmpRef.instance.inputData = data;创建 cmpRef 后；
是的，你已经找到了，这很酷）instance - 只是访问组件的一种方式，如果它是动态创建的，就像这样
我非常感谢这个话题，不幸的是，已经过了一段时间，angular 已经更新了...我正在使用 angular 8 并且无法正常工作...更新会非常好！