将 Microsoft Graph 工具包与 Angular

项目
11/07/2024

除了 vanilla JavaScript 和 HTML 之外，Microsoft Graph 工具包组件还非常适用于 Angular 等 Web 框架。本主题介绍如何将 Microsoft Graph 工具包与 Angular 配合使用。有关如何创建新的Angular应用程序并使用 Microsoft Graph 工具包的分步演练，请参阅将 Microsoft Graph 工具包与 Angular 配合使用。

添加 Microsoft Graph 工具包

首先，需要在 Angular 应用程序中启用自定义元素，方法是将添加到 CUSTOM_ELEMENTS_SCHEMA@NgModule() decorator 中的 app.module.ts。以下示例显示了具体的操作方法：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

接下来，使用安装 npm 包，将 Microsoft Graph 工具包添加到项目：

npm install @microsoft/mgt

初始化提供程序

Microsoft Graph 工具包提供程序为组件启用身份验证和对 Microsoft Graph 的访问。若要了解详细信息，请参阅使用提供程序。使用的提供程序取决于使用解决方案的上下文。

以下示例演示如何添加 MSAL2 提供程序，但你可以使用任何提供程序遵循相同的模型。

注意

如果当前正在使用 MSAL 提供程序，并且想要更新到 MSAL2 提供程序，请按照 MSAL2 提供程序一文中的步骤操作。

导入提供程序并将其设置为在应用程序初始化时进行初始化。将替换为 <YOUR-CLIENT-ID> 应用程序的客户端 ID。

import { Component, OnInit } from '@angular/core';
import { Providers, Msal2Provider } from '@microsoft/mgt';

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

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({
            clientId: '<YOUR-CLIENT-ID>'
        });
    }
}

创建应用/客户端 ID

若要获取客户端 ID，需要在 Microsoft Entra ID 中注册应用程序。

添加组件

现在，可以像在 HTML 模板中一样注册和使用任何 Microsoft Graph 工具包组件。例如，若要添加 Person 组件，请更新应用以注册组件：

import { Component, OnInit } from '@angular/core';
import { Providers } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
import { registerMgtPersonComponent } from '@microsoft/mgt-components';

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

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({
            clientId: '<YOUR-CLIENT-ID>'
        });
        registerMgtPersonComponent();
    }
}

然后将以下内容添加到模板：

<mgt-person person-query="me" view="twolines"></mgt-person>

注意： 应调用寄存器组件函数，使其在子组件中使用。这可确保在捆绑期间使用代码拆分和树摇动的大型应用程序中，这些组件的权重可以推迟到必要为止。

使用Angular自定义组件

所有 Microsoft Graph 工具包组件都支持自定义模板，这些模板允许修改组件的内容。自定义组件的默认语法是使用双大括号来引用每个返回项的属性数据，如下所示：

<!-- Double braces are used for data binding in Angular. This will throw an error. -->
<mgt-agenda>
  <template data-type="event">
    <div>{{event.subject}}</div>
  </template>
</mgt-agenda>

但是，在Angular中，双大括号用于数据绑定，如果尝试使用双大括号语法，Angular编译器将引发错误。

通过使用将工具包使用的默认字符更改为非双大括号 TemplateHelper，可以避免这些错误。最好在顶级应用组件中执行此操作，以便全局应用。

TemplateHelper导入并使用 .setBindingSyntax() 方法设置自定义绑定语法。

import { Component, OnInit } from '@angular/core';
import { Providers, TemplateHelper } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
import { registerMgtPersonComponent } from '@microsoft/mgt-components';

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

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({ clientId: '<YOUR-CLIENT-ID>'})
        TemplateHelper.setBindingSyntax('[[',']]');
        registerMgtPersonComponent();
    }
}

现在，可以使用自定义绑定语法来定义自定义模板。

<mgt-agenda>
  <template data-type="event">
    <div>[[event.subject]]</div>
  </template>
</mgt-agenda>

后续步骤

查看有关生成Angular应用的分步教程。
在样本中试用组件。
在 Stack Overflow 上提问。
在 GitHub 上报告 bug 或提出功能请求。

通过