angular - 可以在来自第三方库的 DOM 元素中渲染 Angular 2 组件吗？

Question

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

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

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

例如，是否可以在 Leaflet 弹出窗口中呈现来 self 的 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();
    }
}

Here is笨蛋。

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

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