在上一个练习中，你学习了如何使用 Microsoft Graph 和来自 Microsoft Graph 工具包的 mgt-search-results 组件从 OneDrive for Business 检索文件以及从 Microsoft Teams 聊天。 你还了解了如何将消息发送到 Microsoft Teams 频道。 在本练习中，你将了解如何从 Microsoft Graph 检索电子邮件和日历事件并将其集成到应用程序中。
通过学习本练习，你将能够：
- 了解 Microsoft Graph 工具包中的 mgt-search-results Web 组件如何用于搜索电子邮件和日历事件。
- 了解如何自定义 mgt-search-results 组件以自定义方式呈现搜索结果。
- 了解如何直接调用 Microsoft Graph 以检索电子邮件和日历事件。
浏览电子邮件搜索代码
小窍门
如果使用的是 Visual Studio Code，可以通过选择以下方法直接打开文件：
- Windows/Linux： Ctrl + P
- Mac： Cmd + P
然后键入要打开的文件的名称。
在上一练习中，你在 Microsoft Entra ID 中创建应用注册，并启动应用程序服务器和 API 服务器。 还更新了
.env文件中的以下值。ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE> TEAM_ID=<TEAMS_TEAM_ID> CHANNEL_ID=<TEAMS_CHANNEL_ID>在继续之前，请确保已完成 上一练习 。
打开 emails.component.html 并花点时间浏览代码。 文件的完整路径 client/src/app/emails/emails.component.html。
找到 mgt-search-results 组件：
<mgt-search-results class="search-results" entity-types="message" [queryString]="searchText" (dataChange)="dataChange($any($event))"> <template data-type="result-message"></template> </mgt-search-results>此 mgt-search-results 组件示例的配置方式与之前查看的方式相同。 唯一的区别是，属性
entity-types设置为message用于搜索电子邮件和提供空模板的属性。- 该
class特性用于指定search-results应将 CSS 类应用于组件。 - 该
entity-types属性用于指定要搜索的数据类型。 在本例中，该值为message。 - 该
queryString属性用于指定搜索词。 - 当搜索结果发生更改时，将
dataChange触发该事件。 将调用电子邮件组件函数dataChange()、将结果传递给它，并在组件中更新名为data的属性。 - 为组件定义空模板。 这种类型的模板通常用于定义搜索结果的呈现方式。 但是，在此方案中，我们告知组件不要呈现任何消息数据。 相反，我们将使用标准数据绑定自行呈现数据（在本例中使用 Angular，但你可以使用所需的任何库/框架）。
- 该
在 emails.component.html 中查看 mgt-search-results 组件，查找用于呈现电子邮件的数据绑定。 此示例循环访问
data属性并写出电子邮件主题、正文预览和查看完整电子邮件的链接。@if (this.data.length) { <div> @for (email of this.data;track $index) { <mat-card> <mat-card-header> <mat-card-title>{{email.resource.subject}}</mat-card-title> <mat-card-subtitle [innerHTML]="email.resource.bodyPreview"></mat-card-subtitle> </mat-card-header> <mat-card-actions> <a mat-stroked-button color="basic" [href]="email.resource.webLink" target="_blank">View Email Message</a> </mat-card-actions> </mat-card> } </div> }
除了使用 mgt-search-search-results 组件检索邮件之外，Microsoft Graph 还提供多个可用于搜索电子邮件的 API。
/search/query你之前看到的 API 当然可以使用，但更直接的选择是messagesAPI。若要查看如何调用此 API，请返回到 graph.service.ts 并找到函数
searchEmailMessages()。 它创建一个 URL，该 URL 可用于调用messagesMicrosoft Graph 的终结点，并将值query分配给$search参数。 然后，该代码发出 GET 请求，并将结果返回到调用方。 运算符$search会自动搜索query主题、正文和发送方字段中的值。async searchEmailMessages(query:string) { if (!query) return []; // The $search operator will search the subject, body, and sender fields automatically const url = `https://graph.microsoft.com/v1.0/me/messages?$search="${query}"&$select=subject,bodyPreview,from,toRecipients,receivedDateTime,webLink`; const response = await Providers.globalProvider.graph.client.api(url).get(); return response.value; }位于emails.component.ts的电子邮件组件调用
searchEmailMessages()并在 UI 中显示结果。override async search(query: string) { this.data = await this.graphService.searchEmailMessages(query); }
浏览日历事件搜索代码
还可以使用 mgt-search-results 组件搜索日历事件。 它可以为你处理呈现结果，但你也可以定义你自己的模板，稍后在本练习中将看到该模板。
打开 calendar-events.component.html 并花点时间浏览代码。 文件的完整路径 client/src/app/calendar-events/calendar-events.component.html。 你将看到它与之前查看的文件和电子邮件组件非常相似。
<mgt-search-results class="search-results" entity-types="event" [queryString]="searchText" (dataChange)="dataChange($any($event))"> <template data-type="result-event"></template> </mgt-search-results>此 mgt-search-results 组件示例的配置方式与之前查看的方式相同。 唯一的区别是，
entity-types属性设置为event用于搜索日历事件和提供空模板的属性。- 该
class特性用于指定search-results应将 CSS 类应用于组件。 - 该
entity-types属性用于指定要搜索的数据类型。 在本例中，该值为event。 - 该
queryString属性用于指定搜索词。 - 当搜索结果发生更改时，将
dataChange触发该事件。 调用日历 事件 组件的dataChange()函数、将结果传递给它，并在组件中更新名为data的属性。 - 为组件定义空模板。 在此方案中，我们将告知组件不要呈现任何数据。 相反，我们将使用标准数据绑定自行呈现数据。
- 该
紧邻calendar-events.component.html
mgt-search-results下方，你将找到用于呈现日历事件的数据绑定。 此示例循环访问data属性并写出事件的开始日期、时间和主题。 组件中包含的自定义函数，例如dayFromDateTime()，调用timeRangeFromEvent()这些函数来正确设置数据的格式。 HTML 绑定还包括一个链接，用于在 Outlook 中查看日历事件，以及指定事件的位置。@if (this.data.length) { <div> @for (event of this.data;track $index) { <div class="root"> <div class="time-container"> <div class="date">{{ dayFromDateTime(event.resource.start.dateTime)}}</div> <div class="time">{{ timeRangeFromEvent(event.resource) }}</div> </div> <div class="separator"> <div class="vertical-line top"></div> <div class="circle"> @if (!this.event.resource.bodyPreview?.includes('Join Microsoft Teams Meeting')) { <div class="inner-circle"></div> } </div> <div class="vertical-line bottom"></div> </div> <div class="details"> <div class="subject">{{ event.resource.subject }}</div> @if (this.event.resource.location?.displayName) { <div class="location"> at <a href="https://bing.com/maps/default.aspx?where1={{event.resource.location.displayName}}" target="_blank" rel="noopener"><b>{{ event.resource.location.displayName }}</b></a> </div> } @if (this.event.resource.attendees?.length) { <div class="attendees"> @for (attendee of this.event.resource.attendees;track attendee.emailAddress.name) { <span class="attendee"> <mgt-person person-query="{{attendee.emailAddress.name}}"></mgt-person> </span> } </div> } @if (this.event.resource.bodyPreview?.includes('Join Microsoft Teams Meeting')) { <div class="online-meeting"> <img class="online-meeting-icon" src="https://img.icons8.com/color/48/000000/microsoft-teams.png" title="Online Meeting" /> <a class="online-meeting-link" href="{{ event.resource.onlineMeetingUrl }}"> Join Teams Meeting </a> </div> } </div> </div> } </div> }
除了使用
search/queryAPI 搜索日历事件之外，Microsoft Graph 还提供events可用于搜索日历事件的 API。 在 graph.service.tssearchCalendarEvents()函数。该
searchCalendarEvents()函数创建开始和结束日期/时间值，用于定义要搜索的时间段。 然后，它会创建一个 URL，该 URL 可用于调用eventsMicrosoft Graph 的终结点，并包括query参数和开始和结束日期/时间变量。 然后发出 GET 请求，结果将返回到调用方。async searchCalendarEvents(query:string) { if (!query) return []; const startDateTime = new Date(); const endDateTime = new Date(startDateTime.getTime() + (7 * 24 * 60 * 60 * 1000)); const url = `/me/events?startdatetime=${startDateTime.toISOString()}&enddatetime=${endDateTime.toISOString()}&$filter=contains(subject,'${query}')&orderby=start/dateTime`; const response = await Providers.globalProvider.graph.client.api(url).get(); return response.value; }下面是创建的 URL 的细分：
- URL
/me/events部分用于指定应检索已登录用户的事件。 - 参数
startdatetimeenddatetime用于定义要搜索的时间段。 在这种情况下，搜索将返回在接下来的 7 天内开始的事件。 - 查询
$filter参数用于按query值（在本例中从 datagrid 中选择的公司名称）筛选结果。 该contains()函数用于查找query日历事件属性中的subject值。 - 查询
$orderby参数用于按属性对结果进行start/dateTime排序。
- URL
url创建后，将使用值url向Microsoft图形 API 发出 GET 请求，并将结果返回到调用方。与前面的组件一样， 日历事件 组件（calendar-events.component.ts 文件）调用
search()并显示结果。override async search(query: string) { this.data = await this.graphService.searchCalendarEvents(query); }注释
还可以从自定义 API 或服务器端应用程序进行Microsoft Graph 调用。 查看 以下教程 ，查看从 Azure 函数调用 Microsoft 图形 API 的示例。
现在，你已看到使用 Microsoft Graph 检索文件、聊天、电子邮件和日历事件的示例。 相同的概念也适用于其他Microsoft图形 API。 例如，可以使用 Microsoft Graph 用户 API 搜索组织中的用户。 还可以使用Microsoft图形 组 API 搜索组织中的组。 可以在 文档中查看Microsoft图形 API 的完整列表。