通过使用模板更改数据呈现

  • 5 分钟

Microsoft Graph 工具包支持创建可更改组件显示数据方式的自定义模板。

假设你计划生成一个 Web 应用程序，以向登录用户显示即将发生的事件。 对于此项目，你希望修改显示用户配置文件的登录按钮，而不是使用默认的 Microsoft Graph 工具包登录组件体验。

可以使用登录组件的模板轻松更改已登录用户配置文件的显示情况。 还可以选择要显示的特定数据，例如用户的显示名称、名字、职务、邮件或电话号码。

要将模板添加到 Microsoft Graph 工具包组件，可以使用 <template> HTML 元素。 例如，可以将模板化添加到登录组件。

<mgt-login>
  <template>
  </template>
</mgt-login>

定义要作为模板的组件的一部分

可以使用多个数据部件制作每个组件的模板。 可以通过使用 <template> 元素上的 data-type 属性来定义要制作为模板的部分。 例如，如果要将登陆组件中的登录按钮部件制作为模板，请添加值为 signed-in-button-content 的 data-type 属性。

<mgt-login>
  <template data-type="signed-in-button-content">
  </template>
</mgt-login>

选择要绑定到模板的数据

Microsoft Graph 工具包组件的模板可帮助你在应用中选择和显示特定的数据上下文。 现在，你已将 signed-in-button-content 定义为模板的数据类型值，假设你要在登录按钮中显示用户的姓氏。

登录组件在运行时将 {personDetails} 对象传递给组件。 {personDetails} 对象提供了有关用户的所有详细信息。 可以使用模板中的 {personDetails} 对象来显示所需的任何用户数据。 例如，要显示用户的名字，请在模板中添加 {personDetails.givenName}。

<mgt-login>
  <template data-type="signed-in-button-content">
    <div>{{personDetails.givenName}}</div>
  </template>
</mgt-login>

提示

要查看可在模板中提供的数据，请输入 {{ this }}。 此步骤显示绑定到模板的整个对象。 {personDetails.givenName}如果值为 Waldek，则按钮内容如以下示例所示。

显示带有模板的 Microsoft Graph 工具包组件的屏幕截图。

在下一个练习中，你将了解如何结合使用模板与 Microsoft Graph 工具包组件来修改数据呈现。