如何使用 spfx 中的動態數據將數據從一個 webpart 發送到另一個 webpart

Question

我在一個項目中有兩個 Web 部件，我試圖將值發送到另一個 Web 部件。 我瀏覽了 microsoft sharepoint 中關於動態數據的文檔。 但我幾乎沒有得到任何東西。

一個 webpart 將被過濾，另一個 webpart 將顯示過濾后的結果。我只是想知道傳遞該值，以便在第二個 webpart 中進行過濾。

任何建議都會有所幫助

Answer 1

使用動態數據連接 SharePoint 框架組件

示例測試演示：

源網頁部分：

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import { IDynamicDataCallables, IDynamicDataPropertyDefinition } from '@microsoft/sp-dynamic-data';
import styles from './SourceWebPartWebPart.module.scss';
import * as strings from 'SourceWebPartWebPartStrings';

export interface IPoint { 
  x: number;
  y: number;
}

export interface ISourceWebPartWebPartProps {
  description: string;
}

export default class SourceWebPartWebPart extends BaseClientSideWebPart<ISourceWebPartWebPartProps> implements IDynamicDataCallables{
  protected onInit(): Promise<void> {

    this.context.dynamicDataSourceManager.initializeSource(this);

    return Promise.resolve();
  }
  public getPropertyDefinitions(): ReadonlyArray<IDynamicDataPropertyDefinition> {
    return [
      {
        id: 'x',
        title: 'Mouse-X'
      },
      {
        id: 'y',
        title: 'Mouse-y'
      }
    ];
  } 
  public getPropertyValue(propertyId: string): number {
    switch (propertyId) {
      case 'x':
        return this.mousePosition.x;
      case 'y':
        return this.mousePosition.y;
    }

    throw new Error('Bad property id');
  }
  private mousePosition: IPoint;  

  public onMouseClick(e) {  
    this.mousePosition = { x: e.clientX, y: e.clientY };
    this.context.dynamicDataSourceManager.notifyPropertyChanged('x');
    this.context.dynamicDataSourceManager.notifyPropertyChanged('y');
  }

  public render(): void {
    this.domElement.innerHTML = `
    <div id="webpartdiv" style="width: 700px; height: 200px; background-color: yellow">

    </div>`;


  this.domElement.onclick=this.onMouseClick.bind(this);

  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

目標網頁部分：

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  IWebPartPropertiesMetadata,
  IPropertyPaneConditionalGroup,
  DynamicDataSharedDepth,
  PropertyPaneDynamicFieldSet,
  PropertyPaneDynamicField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './TargetWebPartWebPart.module.scss';
import * as strings from 'TargetWebPartWebPartStrings';

import { DynamicProperty } from '@microsoft/sp-component-base';

export interface ITargetWebpartWebPartProps {
  description: string;
  x: DynamicProperty<number>;
  y: DynamicProperty<number>;
}

export default class TargetWebpartWebPart extends BaseClientSideWebPart<ITargetWebpartWebPartProps> {

  public render(): void {

    const x: number | undefined = this.properties.x.tryGetValue();
    const y: number | undefined = this.properties.y.tryGetValue();
    console.log(x);
    this.domElement.innerHTML = `
      <div class="${ styles.targetWebPart }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">TargetWebpart</span>                 
                <div>Mouse X: ${ x == undefined ? '0' : x }</div>
                <div>Mouse Y: ${ y == undefined ? '0' : y }</div>
            </div>
          </div>
        </div>
      </div>`;
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected get propertiesMetadata(): IWebPartPropertiesMetadata {
    return {
      'x': {
        dynamicPropertyType: 'number'
      },
      'y': {
        dynamicPropertyType: 'number'
      }
    };
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          groups: [
            {
              groupFields: [
                PropertyPaneDynamicFieldSet({
                  label: 'Select data source',
                  fields: [
                    PropertyPaneDynamicField('x', {
                      label: 'Position x'
                    })
                  ]
                }),
                PropertyPaneDynamicFieldSet({
                  label: 'Select data source',
                  fields: [
                    PropertyPaneDynamicField('y', {
                      label: 'Position y'
                    })
                  ]
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

或者

在 SPFx Web 部件之間共享數據