在 Angular 应用程序中嵌入 Power BI 内容

创建 Power BI 嵌入式分析应用程序时，Angular 可以帮助快速设置可维护的可缩放应用。 Angular 将结构和设计模式添加到前端开发，使开发人员能够创建更易于维护和更新的更高级的 Web 应用程序。

借助 Power BI Angular 库，可以将以下 Power BI 项嵌入到 Angular 应用程序中：

报告
仪表板
仪表板磁贴
报表视觉对象
Q&A
分页报表

如何在 Angular Web 应用中嵌入 Power BI 内容

本部分介绍如何将 Angular 导入应用，并将其用于嵌入 Power BI 报表。

有关详细使用情况信息，请参阅 Power BI Angular 自述文件文件。

导入 Angular 库

可以在 NPM上找到 Power BI Angular 组件。它还在 GitHub上开放源代码。

若要将 Angular 导入 Web 应用，请添加下面列出的导入。

import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    ...
    ...
    PowerBIEmbedModule
  ],
  exports: ...,
  declarations: ...
})

使用 Angular 嵌入报表

此示例演示如何使用 Angular 嵌入 Power BI 报表。以下示例下方是代码示例中每个组件的说明。

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

以下列表包括代码片段示例中每个组件的说明或其他信息。

embedConfig - 定义要嵌入的内容，并指定内容的设置。嵌入以下 Power BI 项时，嵌入配置将发生更改：
eventHandlers - 事件名称及其处理程序的映射对象。有关详细信息，请参阅如何处理事件。
cssClassName - 为嵌入项提供 CSS 类名称，以便使用 CSS 控制嵌入 iframe 的样式。
分阶段化 - 通过让开发人员更灵活地分阶段报表嵌入来提高最终用户的体验。有关详细信息，请参阅使用分阶段嵌入。

启动 Power BI 报表

powerbi.bootstrap 是一种方法，用于帮助开发人员更快地嵌入 Power BI 项并获得更好的性能。有关详细信息，请参阅使用启动来提高性能。

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

若要在引导后嵌入报表，请更新 embedConfig（至少使用 accessToken 和 embedUrl）。

Angular 演示

Angular 存储库包含一个演示，该演示使用 PowerBIReportEmbed 组件嵌入示例报表。它演示了从引导报表到嵌入和更新嵌入报表的完整流。它还演示了通过单击 “删除视觉对象”按钮从报表中删除视觉对象，从而演示了 powerbi 报表创作 库的用法。它还设置“DataSelected”事件。

有关详细信息，请参阅自述文件的演示部分。

显示 Power BI Angular 演示的动画 gif。

运行演示

演示是存储库中的子文件夹。若要在 localhost 上运行演示，请执行以下步骤：

运行以下命令：
```
npm run demo
```
若要在浏览器中查看，请将其重定向到 http:/localhost:4200/。

Last updated on 2024-07-17

通过