如何在jsPanel Angular2中将组件加载为内容答案

【问题标题】：How to load component as content in jsPanel Angular2如何在jsPanel Angular2中将组件加载为内容
【发布时间】：2019-11-03 16:57:03
【问题描述】：

我正在尝试在 jsPanel 中加载一个 Angular 组件，但它还不能工作。 Chrome DevTools 总是显示<app-chat-tab></app-chat-tab> 而不是组件html，所以我认为它根本没有呈现。

这是我的代码：

export class ChatTabService {
  jsPanel: any;
  activeChats: ClientUser[];

  constructor(@Inject(PLATFORM_ID) private platformId, private zone: NgZone) {
    if (isPlatformBrowser(this.platformId)) {
      this.jsPanel = require('node_modules/jspanel4/es6module/jspanel.min.js').jsPanel;
    }
  }

  openChatWindow(toUser: ClientUser) {
    if (!this.activeChats.find(u => u.id === toUser.id)) {
        this.jsPanel.create({
          theme: 'primary',
          headerTitle: toUser.username,
          position: 'center-top 0 58',
          contentSize: '450 250',
          content: '<app-chat-tab></app-chat-tab>',
          callback() {
            this.content.style.padding = '20px';
          },
          onbeforeclose() {
            return confirm('Do you really want to close the panel?');
          }
        });
        this.activeChats.push(toUser);
    }
  }

}

有什么想法吗？

【问题讨论】：

Angular 不允许你以这种方式这样做。具体来说，它不会将app-chat-tab 解析和实例化为角度组件
这很可悲，但我是这么认为的.. 有什么解决方法吗？
可能有，但我对jsPanel一无所知，抱歉。我只是想阻止你使用这种方法。

标签： angular angular2-services

【解决方案1】：

是的，您可以在 jsPanel 内容中使用 Angular 组件。为此，您必须首先获取要在 jsPanel 的内容中使用的组件的 nativeElemetn。

因此，如果您的组件名称是“PopupContentComponent”，那么您需要添加以下代码。

const factory = this.resolver.resolveComponentFactory(PopupContentComponent);
const componentRef = this.vcr.createComponent(factory);
const element = componentRef.location.nativeElement;

确保您已将依赖项包含在构造函数中。

constructor(private cd: ChangeDetectorRef,
        private vcr: ViewContainerRef,
        private resolver: ComponentFactoryResolver) {
    }

然后您可以在 jsPanel“内容”中使用“元素”。

onwindowresize: true,
content: element,
onstatuschange: (panel, status) => {

这是用 Angular 10 测试的。

【讨论】：