在上一個練習中，您學到如何使用 Microsoft Graph 和 Microsoft Graph 工具包中的 mgt-search-results 元件，從商務版 OneDrive 擷取檔案，並從 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
然後輸入您要開啟的檔案名。
在 先前的練習 中，您已在 entra ID Microsoft中建立應用程式註冊，並啟動應用程式伺服器和 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-resultsCSS 類別應該套用至元件。 -
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-results 元件來擷取訊息之外，Microsoft Graph 還提供數個 API，可用來搜尋電子郵件。
/search/query您稍早看到的 API 當然可以使用，但更直接的選項是messagesAPI。若要查看如何呼叫此 API，請返回 graph.service.ts 並找出函
searchEmailMessages()式。 它會建立 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-resultsCSS 類別應該套用至元件。 -
entity-types屬性是用來指定要搜尋的數據類型。 此處的值為event。 - 屬性
queryString是用來指定搜尋字詞。 - 搜尋
dataChange結果變更時引發事件。 呼叫行事曆 事件 元件的dataChange()函式、將結果傳遞至該函式，並在元件中更新名為data的屬性。 - 為元件定義空的範本。 在此案例中，我們會告知元件不要轉譯任何數據。 相反地，我們將使用標準數據系結來轉譯數據。
- 屬性
緊接在
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.ts 中找出 函searchCalendarEvents()式。函
searchCalendarEvents()式會建立開始和結束日期/時間值，用來定義要搜尋的時間週期。 然後，它會建立 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的部分用來指定應該擷取已登入使用者的事件。 -
startdatetime和enddatetime參數可用來定義要搜尋的時間週期。 在此情況下，搜尋會傳回在未來 7 天內開始的事件。 - 查詢
$filter參數是用來依query值篩選結果（在此案例中從 datagrid 選取的公司名稱）。 函contains()式用來尋找query行事曆事件 屬性中的subject值。 - 查詢
$orderby參數是用來依start/dateTime屬性排序結果。
- URL
url建立 之後，會使用的值url對 Microsoft Graph API 提出 GET 要求，並將結果傳回給呼叫端。如同先前的元件， 行事曆事件 元件（calendar-events.component.ts 檔案）會呼叫
search()並顯示結果。override async search(query: string) { this.data = await this.graphService.searchCalendarEvents(query); }備註
您也可以從自定義 API 或伺服器端應用程式進行Microsoft Graph 呼叫。 檢視 下列教學課程 ，以查看從 Azure 函式呼叫 Microsoft Graph API 的範例。
您現在已看到使用 Microsoft Graph 來擷取檔案、聊天、電子郵件訊息和行事曆事件的範例。 相同的概念也可以套用至其他Microsoft Graph API。 例如，您可以使用 Microsoft Graph 使用者 API 來搜尋組織中的使用者。 您也可以使用 Microsoft Graph 群組 API 來搜尋組織中的群組。 您可以在 檔案中檢視Microsoft圖形 API 的完整清單。