在 Angular 應用程式中內嵌 Power BI 內容

建立 Power BI 內嵌式分析應用程式時，Angular 可協助快速設定可維護且可調整的應用程式。 Angular 會將結構和設計模式新增至前端開發，讓開發人員能夠建立更容易維護和更新的更進階 Web 應用程式。

Power BI Angular 連結庫可讓您將下列 Power BI 專案內嵌至 Angular 應用程式：

報告
儀錶板
儀錶板磚
報表視覺效果
問與答
編頁報表

如何在 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 的樣式。
階段dEmbedding - 藉由讓開發人員更有彈性地進行階段報表內嵌，以改善終端用戶的體驗。如需詳細資訊，請參閱使用階段式內嵌。

啟動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-10-25