假设我有一个Angular 2应用程序,它包装了第三方库,例如Leaflet Mapping API,它自己进行DOM管理.
从Angular调用第三方库组件我已经工作了.
但是,在Leaflet示例中,如果我想渲染我的一个Angular组件/内部/某些标记由第三方库呈现,该怎么办？
例如,是否可以在Leaflet弹出窗口中从我的Angular 2应用程序渲染组件？ http://leafletjs.com/reference-1.1.0.html#popup
或者在一般情况下,如果我引用了Angular的“外部”DOM元素,是否有可用于将Angular组件附加到该DOM元素并进行管理的API？
解决方法
是的,如果动态实例化组件,则可以将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 the plunker.
您可以在文章中阅读有关动态组件的更多信息：
> Here is what you need to know about dynamic components in Angular
