找不到名称“SP”.ts(2304)答案

【问题标题】：Cannot find name 'SP'.ts(2304)找不到名称“SP”.ts(2304)
【发布时间】：2019-07-23 10:43:37
【问题描述】：

我正在使用以下函数在共享点的模型弹出窗口中显示 url。

function openDialog(pageUrl) { 
          SP.UI.ModalDialog.showModalDialog( 
            { 
              url: pageUrl, 
              width: 700, 
              height: 700, 
              title: "Office Holidays" 
            } 
          ); 
    }

&lt;button onclick="openDialog('https://stackoverflow.com')"&gt; Click Me&lt;/button&gt;

但是当我使用 react 在 SPFX 中使用相同的函数时，它在 SP 命名空间给我一个错误。

有什么我需要安装或导入的吗？

【问题讨论】：

需要更多信息。一些上下文。
这是显示模型对话框的 javascript 函数，我想在打字稿中使用它，但是当我尝试将函数转换为 ts 时，它在 SP 命名空间出现错误 -> definitelytyped.org/docs/sharepoint--SharePoint/classes/…跨度>
pageUrl: any... 请输入字符串，不要使用任何。并发布你得到的错误。也许您缺少导入？或者某些类型是错误的。需要看到你得到的错误
对不起，我已经更新了我的问题
这个 SP。它的定义如何？它作为模块导入？或者您正在使用一些脚本链接？

标签： typescript sharepoint dialog

【解决方案1】：

示例演示：

import { SPComponentLoader } from '@microsoft/sp-loader';
declare var SP:any;

加载必要的js和css

SPComponentLoader.loadCss('/_layouts/15/1033/styles/corev15.css');  

    SPComponentLoader.loadScript('/_layouts/15/init.js', {
      globalExportsName: '$_global_init'
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
        globalExportsName: 'Sys'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/ScriptResx.ashx?name=sp.res&culture=en-us', {
        globalExportsName: 'Sys'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
        globalExportsName: 'SP'
      });
    })
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/sp.init.js', {
        globalExportsName: 'SP'
      });
    })        
    .then((): Promise<{}> => {
      return SPComponentLoader.loadScript('/_layouts/15/sp.ui.dialog.js', {
        globalExportsName: 'SP'
      });
    });

绑定事件。

this.domElement.innerHTML = `
      <div class="${ styles.fixWebpart }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>            
              <input id="myButton" type="button" value="Click me" />                                  
            </div>
          </div>
        </div>
      </div>`

    this.domElement.querySelector('#myButton').addEventListener('click', () => { this.MyNotify(); });

事件

public MyNotify():void{      

  SP.UI.ModalDialog.showModalDialog( 
    { 
      url: '/sites/lee/Lists/ListB/AllItems.aspx', 
      width: 700, 
      height: 700, 
      title: "Office Holidays" 
    } 
  );
  }

【讨论】：

谢谢，只是想在您的答案中添加一些内容。如果我们在 sharepoint 上下文中运行 SPFx Webpart，那么我们不需要将所有 javascript 加载到 webpart 中，因为默认情况下它在 sharepoint 站点中可用。
@Lee_MSFT，我已经在我的应用程序中尝试过您的代码，但我收到 SP 未定义错误。我正在将按钮调用事件变为函数。
@MAC 将其声明为“declare var SP:any;”。