Angular中未定义的Gapi对象答案

【问题标题】：Gapi object undefined in AngularAngular中未定义的Gapi对象
【发布时间】：2023-03-17 06:20:01
【问题描述】：

我正在使用 Angular 在我的应用程序中集成 google-docs。我关注下面的 google-docs API 链接，该链接以 Javascript 格式

提供

https://developers.google.com/docs/api/quickstart/js

<!DOCTYPE html>
<html>
  <head>
    <title>Google Docs API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>
      Google Docs API Quickstart
    </p>
    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" style="display: none;">Authorize</button>
    <button id="signout_button" style="display: none;">Sign Out</button>
    <pre id="content"></pre>

    <script type="text/javascript">
      // Client ID and API key from the Developer Console
      var CLIENT_ID = '<YOUR_CLIENT_ID>'
      var API_KEY = '<YOUR_API_KEY>';

      // Array of API discovery doc URLs for APIs used by the quickstart
      var DISCOVERY_DOCS = ['https://docs.googleapis.com/$discovery/rest?version=v1'];

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      var SCOPES = "https://www.googleapis.com/auth/documents.readonly";

      var authorizeButton = document.getElementById('authorize_button');
      var signoutButton = document.getElementById('signout_button');

      /**
       *  On load, called to load the auth2 library and API client library.
       */
      function handleClientLoad() {
        gapi.load('client:auth2', initClient);
      }

      /**
       *  Initializes the API client library and sets up sign-in state
       *  listeners.
       */
      function initClient() {
        gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          discoveryDocs: DISCOVERY_DOCS,
          scope: SCOPES
        }).then(function() {
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
          authorizeButton.onclick = handleAuthClick;
          signoutButton.onclick = handleSignoutClick;
        });
      }

      /**
       *  Called when the signed in status changes, to update the UI
       *  appropriately. After a sign-in, the API is called.
       */
      function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
          authorizeButton.style.display = 'none';
          signoutButton.style.display = 'block';
          printDocTitle();
        } else {
          authorizeButton.style.display = 'block';
          signoutButton.style.display = 'none';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

      /**
       * Append a pre element to the body containing the given message
       * as its text node. Used to display the results of the API call.
       *
       * @param {string} message Text to be placed in pre element.
       */
      function appendPre(message) {
        var pre = document.getElementById('content');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }

      /**
       * Prints the title of a sample doc:
       * https://docs.google.com/document/d/195j9eDD3ccgjQRttHhJPymLJUCOUjs-jmwTrekvdjFE/edit
       */
      function printDocTitle() {
        gapi.client.docs.documents.get({
        documentId: '195j9eDD3ccgjQRttHhJPymLJUCOUjs-jmwTrekvdjFE'
      }).then(function(response) {
        var doc = response.result;
        var title = doc.title;
        appendPre('Document "' + title + '" successfully found.\n');
      }, function(response) {
        appendPre('Error: ' + response.result.error.message);
      });
    }
    </script>
    <script async="" defer="" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()" src="https://apis.google.com/js/api.js"></script>
  </body>
</html>

我正在尝试将其从 Javascript 迁移到 Angular 应用程序。这里的问题是gapi.load() 和其他地方也使用了gapi 未在javascript 中声明的对象名称。我不擅长高级javascript，我在任何地方都找不到如何导入gapi。

谁来帮帮我

【问题讨论】：

不确定，但可以创建这样的脚本吗？
你不能只添加这个脚本标签吗？ <script src="https://apis.google.com/js/api.js"></script>
据我所知，url不能添加角度
可以添加like this吗？

标签： javascript angular google-docs-api

【解决方案1】：

以下节点包将Gapi 包装到服务层中，允许在Angular 9+ 项目中使用Gapi。

npm install ng-gapi

关注 npm 包link 了解更多信息。

【讨论】：