如何在Angular 5中集成Google Calendar API以展示日程事件？

作为Angular新手，对接Google Calendar API确实容易摸不着头绪，我来给你梳理一套亲测可行的集成步骤，专门适配Angular 5：

• 打开Google Cloud控制台创建新项目，找到并启用Google Calendar API
• 创建OAuth 2.0客户端ID，应用类型选择「Web应用」，把你的本地开发域名（比如http://localhost:4200）添加到「授权重定向URI」列表中
• 保存生成的客户端ID，后面代码里要用到

1. 安装依赖与配置脚本 #

因为Angular 5版本偏老，我们需要安装类型声明包来获得代码提示，同时引入Google的API脚本：

npm install @types/gapi @types/gapi.auth2 --save-dev

然后打开angular-cli.json（Angular 5用的是这个配置文件，不是后续版本的angular.json），在scripts数组中添加Google API的CDN地址：

"scripts": [
  "https://apis.google.com/js/api.js"
]

2. 创建封装API的服务 #

新建一个google-calendar.service.ts，把认证、事件获取的逻辑都封装在这里，方便组件调用：

import { Injectable } from '@angular/core';

// 声明gapi全局变量，避免类型报错
declare var gapi: any;

@Injectable()
export class GoogleCalendarService {
  // 替换成你自己的客户端ID
  private clientId = '你的OAuth客户端ID';
  // 只读日历权限，足够获取事件
  private scope = 'https://www.googleapis.com/auth/calendar.readonly';
  private authInstance: any;

  constructor() { }

  // 初始化认证实例
  initAuth(): Promise<void> {
    return new Promise((resolve, reject) => {
      gapi.load('client:auth2', () => {
        gapi.auth2.init({
          client_id: this.clientId,
          scope: this.scope
        }).then(() => {
          this.authInstance = gapi.auth2.getAuthInstance();
          resolve();
        }).catch(err => reject(err));
      });
    });
  }

  // 触发用户登录授权
  signIn(): Promise<any> {
    return this.authInstance.signIn();
  }

  // 检查用户是否已登录授权
  isSignedIn(): boolean {
    return this.authInstance.isSignedIn.get();
  }

  // 获取即将到来的事件，默认返回10条
  getUpcomingEvents(maxResults: number = 10): Promise<any> {
    return gapi.client.calendar.events.list({
      'calendarId': 'primary', // 用用户的主日历，也可以替换成指定日历ID
      'timeMin': (new Date()).toISOString(), // 只获取当前时间之后的事件
      'showDeleted': false,
      'singleEvents': true, // 把重复事件拆分成单个条目
      'maxResults': maxResults,
      'orderBy': 'startTime' // 按开始时间排序
    });
  }
}

3. 在组件中调用服务 #

比如在app.component.ts里实现登录和加载事件的逻辑：

import { Component, OnInit } from '@angular/core';
import { GoogleCalendarService } from './google-calendar.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  upcomingEvents: any[] = [];
  loading = false;

  constructor(private calendarService: GoogleCalendarService) { }

  ngOnInit() {
    // 初始化认证
    this.calendarService.initAuth().then(() => {
      // 如果已登录直接加载事件，否则提示登录
      if (this.calendarService.isSignedIn()) {
        this.loadEvents();
      }
    });
  }

  loadEvents() {
    this.loading = true;
    this.calendarService.getUpcomingEvents(5).then(response => {
      this.upcomingEvents = response.result.items;
      this.loading = false;
    }).catch(err => {
      console.error('加载日历事件失败:', err);
      this.loading = false;
    });
  }
}

4. 模板中展示事件 #

在app.component.html里添加渲染逻辑：

<div class="calendar-container">
  <h2>我的日历事件</h2>
  
  <button *ngIf="!calendarService.isSignedIn()" (click)="calendarService.signIn().then(() => loadEvents())">
    登录Google账号查看事件
  </button>

  <div *ngIf="loading">加载中...</div>

  <ul *ngIf="upcomingEvents.length > 0 && !loading">
    <li *ngFor="let event of upcomingEvents" class="event-item">
      <h3>{{event.summary}}</h3>
      <p>
        <strong>开始时间:</strong> 
        {{event.start.dateTime ? (event.start.dateTime | date:'yyyy-MM-dd HH:mm') : event.start.date}}
      </p>
      <p *ngIf="event.description">{{event.description}}</p>
    </li>
  </ul>

  <p *ngIf="upcomingEvents.length === 0 && calendarService.isSignedIn() && !loading">暂无即将到来的事件</p>
</div>

• Angular 5版本较老，安装@types/gapi时可以指定兼容版本，比如@types/gapi@^0.0.39
• 本地开发时，Google Cloud控制台的「授权重定向URI」必须和你的项目运行地址完全一致，否则会触发授权错误
• 如果需要访问公开日历（不需要用户登录），可以改用API_KEY认证，但这种方式权限有限，只能读取公开数据
• 部署到生产环境时，记得更新Google Cloud里的授权域名和重定向URI

内容的提问来源于stack exchange，提问作者star001