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

Question

我正在尝试在 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);
    }
  }

}

有任何想法吗？

Answer 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 测试的。