一个人可以在第三方库的DOM元素中渲染Angular 2组件吗？

Question

假设我有一个Angular 2应用程序，该应用程序包装了第三方库（如Leaflet Mapping API），该库由它自己进行DOM管理。

我正在从Angular调用第三方库组件。

但是，在Leaflet示例中，如果要渲染我的Angular组件之一/ inside /第三方库渲染的某些标记怎么办？

例如，是否可以在Leaflet弹出窗口中从Angular 2应用程序渲染组件？http://leafletjs.com/reference-1.1.0.html#popup

还是在一般情况下，如果我引用了Angular外部的DOM元素，是否有API可以将Angular组件附加到该DOM元素并进行管理？

Answer 1

是的，如果您动态实例化组件，则可以将DOM元素传递给组件创建方法。此DOM元素将充当新创建的组件的宿主。但是，您将必须手动触发更改检测。Angular CDK通过引入门户网站主机解决了该问题。

这是基本示例：

@Component({
    selector: 'a-comp',
    template: `<h2>I am {{name}}</h2>`
})
export class AComponent {
  name = 'A component';
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class AppComponent {
    name = `Angular! v${VERSION.full}`;
    componentRef;

    constructor(r: ComponentFactoryResolver, i: Injector) {
        const someDOMElement = document.querySelector('.host');
        const f = r.resolveComponentFactory(AComponent);
        this.componentRef = f.create(i, [], someDOMElement);
    }

    ngDoCheck() {
        this.componentRef.changeDetectorRef.detectChanges();
    }
}

这是矮人。

您可以在文章中阅读有关动态组件的更多信息：

• 这是您需要了解的有关Angular中的动态组件的知识