如何在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 測試的。