Question

假设我有一个包含第三方库的Angular 2应用程序，例如Leaflet Mapping API，它可以自己管理DOM。

从Angular调用第三方库组件我已经开始工作了。

但是，在Leaflet示例中，如果我想渲染我的一个Angular组件/内部/某些标记由第三方库呈现，该怎么办。

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

或者在一般情况下，如果我有一个DOM元素的引用＆＃34;外部＆＃34; Angular，是否有可用于将Angular组件附加到该DOM元素并进行管理的API？

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();
    }
}

Here is掠夺者。

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

Here is what you need to know about dynamic components in Angular

可以从第三方库中渲染DOM元素中的Angular 2组件吗？

1 个答案: