练习 - 排查呈现问题

8 分钟

在本练习中，将了解如何检查 Microsoft Graph 工具包组件中的可用数据。还将确保组件在 Web 应用中呈现一致。让我们通过准备 Web 应用来开始练习。

创建 Web 应用

在 Visual Studio Code 中，打开 index.html 文件。

将其内容重置为以下 HTML 内容。你将替换为 YOUR-CLIENT-ID 在上一模块中注册的 Microsoft Entra 应用中 的应用程序 (客户端) ID ， 使用属性和 CSS 配置 Microsoft Graph 工具包组件并设置其样式：

<html>
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>

  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-agenda days="3" group-by-day></mgt-agenda>
  </body>
</html>

验证 Web 应用是否按预期工作。在 Visual Studio Code 中，运行 Live Server 测试应用。打开浏览器并转到 http://localhost:3000。应会看到事件列表。

调试组件模板

现在已确认 Web 应用正常工作，接下来调整“日程”组件显示事件的方式。

通过在模板中指定以下内容，将“日程”组件更改为仅显示事件的标题。
```
<mgt-agenda days="3" group-by-day>
  <template>{{ event.title }}</template>
</mgt-agenda>
```
“议程”组件现在不显示任何内容。让我们修复此问题。

由于要更改事件的呈现，让我们通过使用 data-type 属性来使用 event 模板。

<mgt-agenda days="3" group-by-day>
  <template data-type="event">{{ event.title }}</template>
</mgt-agenda>

现在可以看到天数列表，但组件仍不显示事件的标题。通过更改模板来查看哪些数据可用。
```
<mgt-agenda days="3" group-by-day>
  <template data-type="event">{{ console.log(this) }}</template>
</mgt-agenda>
```
在浏览器的开发人员工具中，检查记录到控制台的数据后，可以看到事件的标题存储在 subject 属性中。

更新模板，使其引用 subject 属性，而不是 title。

<mgt-agenda days="3" group-by-day>
  <template data-type="event">{{ event.subject }}</template>
</mgt-agenda>

现在应会看到每个事件的标题。

现在，让我们更改 Web 应用中的字体颜色。

在 Visual Studio Code 中，打开 index.html 文件。通过在 head 节中添加以下style元素来更改 Web 应用的全局字体颜色。
```
<style>
  body {
    color: blue;
  }
</style>
```
在正文中，添加问候语欢迎用户。
```
<h1>Hello</h1>
```

在 mgt-agenda 组件中，删除上一练习中添加的自定义模板。 Web 应用的完整 HTML 应如下例所示。

<html>
    <head>
      <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
      <style>
        body {
          color: blue;
        }
      </style>
    </head>

    <body>
      <h1>Hello</h1>
      <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
      <mgt-login></mgt-login>
      <mgt-agenda days="3" group-by-day></mgt-agenda>
    </body>
</html>

在 Visual Studio Code 中，运行 Live Server 测试应用。打开浏览器并转到 http://localhost:3000。应会看到事件列表。

事件列表未使用定义的字体颜色。让我们修复此问题。

在 Visual Studio Code 中，扩展 style 定义以包含样式事件的 CSS 自定义属性。

<style>
  body {
    color: blue;
  }
  mgt-agenda {
    --agenda-header-color: blue;
    --agenda-event-time-color: blue;
    --agenda-event-subject-color: blue;
  }
</style>

在 Visual Studio Code 中，运行 Live Server 测试应用。打开浏览器并转到 http://localhost:3000。应会看到显示的事件列表，这些事件使用 Web 应用的字体颜色。

继续

练习 - 排查呈现问题

创建 Web 应用

调试组件模板

反馈