App 面板實作

新增外掛面板

1. 新增檔案 panel.module.ts 與 panel.component.ts。

2. panel.module.ts 中設定 static panels 變數，其中直接將 Component 置入其中。

   panel.module.ts

   export class AppPanelModule {
     /**
      * 面板清單，變數名稱與元件名稱一對一
      *
      * ❌此處請勿使用
      * ***static panels = { ...PANELS }***
      */
     static panels = { AppDefaultPanelComponent }
   }
   

3. panel.component.ts Component 繼承UofxPluginPanel。

   panel.component.ts

   import { Component, OnInit } from '@angular/core';
   
   import { UofxPluginPanel } from '@uofx/plugin';
   
   @Component({
     selector: 'app-panel',
     template: `Default Panel`,
   })
   export class AppDefaultPanelComponent extends UofxPluginPanel implements OnInit {
     ngOnInit(): void {
       console.log('pluginSetting', this.pluginSetting);
     }
   }
   

4. 在 webpack-exposes.config.js 中新增AppPanelModule。

5. 設定 panels-design.json 與 panels-runtime.json，請參考 配置設定。

Note

App 面板因 Ionic 限制，無法如同 Web 面板一樣使用 standalone component。

使用 UofxPluginPanel 內建工具

請參考 面板工具。