具有 2 个页面/Web 部件通信的 SPFx 解决方案

Question

我正在替换允许主应用程序页面触发与原始页面对话的无头窗口的服务器端解决方案。

现在我正在使用 SPFx 在 SPO 中执行此操作，到目前为止，我只使用了一个页面和 Web 部件，其中包含一个无法退出发送页面的大对话框。

我的用户希望能够将对话框放在第二台显示器上，所以我认为我必须在不同的窗口/Web 部件中进行。我正在计划一个版本 2.0 并收集如何做的想法。

到目前为止，我认为我将使用“broadcast-channel”在父页面/Web 部件和子页面/Web 部件之间进行通信。

我还需要弄清楚以下几点：

1. 如何创建仅包含 SPFx Web 部件而不包含所有侧面和顶部 bla bla 的共享点页面。 （可以安全地被 CSS 隐藏？）
2. 如何将 spfxContext 从父级传递给子级
3. 如何在构建解决方案时同时调试 2 个单独的 SPFx 项目。

欢迎提出任何建议。样品更多？？？？

提前谢谢你。

Answer 1

1. 尝试使用扩展：

export default class CssInjectApplicationCustomizer
  extends BaseApplicationCustomizer<ICssInjectApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    const cssUrl: string = '/SiteAssets/inject.css';
    const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
    let customStyle: HTMLLinkElement = document.createElement("link");
    customStyle.href = cssUrl;
    customStyle.rel = "stylesheet";
    customStyle.type = "text/css";
    head.insertAdjacentElement("beforeEnd", customStyle);

    return Promise.resolve();
  }
}

注入.css：

/* Hide header */
#SuiteNavPlaceHolder, .od-SuiteNav{
    display:none !Important;
}

/** Hide options header **/
div[class^="sideActionsWrapper-"], 
.sideActionsWrapper-53 .ms-searchux-searchbox {
    display: none;
}

/** Hide header lists**/
.CanvasSection .ms-DetailsList-headerWrapper,
.CanvasSection div[class^="itemsViewDetailsListCommandBar_"]{
    display: none;
}

/** Hide Header page **/
div[class^="detailsListContainer_"], 
.ControlZoneEmphasisBackground,
.root-63, 
.root-76{
    background-color:transparent;
}