可以在第三方库的 DOM 元素中渲染 Angular 2 组件吗? [英] Can one render Angular 2 Components inside DOM elements from third party libraries?

问题描述

假设我有一个 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 元素并对其进行管理?

解决方案

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

这是一个基本的例子:

@Component({选择器:'a-comp'，模板:`<h2>我是 {{name}}</h2>`})导出类 AComponent {name = '一个组件';}@零件({选择器:'我的应用'，模板:`
<h2>你好{{name}}</h2></div>`,})导出类 AppComponent {名称=`角！v${VERSION.full}`;组件参考；构造函数(r:ComponentFactoryResolver，i:注入器){const someDOMElement = document.querySelector('.host');const f = r.resolveComponentFactory(AComponent);this.componentRef = f.create(i, [], someDOMElement);}ngDoCheck() {this.componentRef.changeDetectorRef.detectChanges();}}

这是 plunker.

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

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

Suppose I have an Angular 2 app that wraps a third party library such as the Leaflet Mapping API that does it's own DOM management.

Invoking the third party library components from Angular I have working.

However, in the Leaflet example, what if I want to render one of my Angular components /inside/ some markup rendered by the third party library.

For example, is it possible to render a component from my Angular 2 app inside a Leaflet popup? http://leafletjs.com/reference-1.1.0.html#popup

Or in the general case, if I have a reference to a DOM element "outside" of Angular, is there an API available to append an Angular component to that DOM element and manage it?

解决方案

Yes, if you instantiate a component dynamically, you can pass the DOM element to the component creation method. This DOM element will act as host of the newly created component. However, you would have to manually trigger change detection. Angular CDK solves that problem by introducing portal hosts.

Here is the basic example:

@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 the plunker.

You can read more about dynamic components in the article:

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

这篇关于可以在第三方库的 DOM 元素中渲染 Angular 2 组件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！