Vložení obsahu Power BI do aplikace Angular

Při vytváření analytické aplikace Power BI Embedded vám Angular může pomoct rychle nastavit udržovatelnou škálovatelnou aplikaci. Angular přidává vzory struktury a návrhu do front-endového vývoje, což vývojářům umožňuje vytvářet pokročilejší webové aplikace, které se snadněji udržují a aktualizují.

Knihovna Power BI Angular umožňuje vložit do aplikace Angular následující položky Power BI:

  • Zprávy
  • Řídicích panelů
  • Dlaždice řídicího panelu
  • Vizuály sestav
  • Q&A
  • Stránkované sestavy

Jak vložit obsah Power BI do webové aplikace Angular

Tato část popisuje, jak importovat Angular do aplikace a jak ji použít k vložení sestavy Power BI.

Podrobné informace o využití najdete v souboru souboru Readme Power BI Angular.

Import knihovny Angular

Komponentu Power BI Angular najdete na NPM. Je také opensourcová na GitHubu .

Pokud chcete importovat Angular do webové aplikace, přidejte importy uvedené níže.

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

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

Vložení sestavy pomocí Angularu

Tento příklad ukazuje, jak vložit sestavu Power BI pomocí Angular. Pod příkladem je popis jednotlivých komponent v ukázce kódu.

<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>

Následující seznam obsahuje popisy nebo další informace pro každou komponentu v příkladu fragmentu kódu.

  • embedConfig – definuje obsah, který vkládáte, a určuje nastavení obsahu. Konfigurace vložení se změní při vkládání následujících položek Power BI:

  • obslužné rutiny událostí – objekt mapy pro názvy událostí a jejich obslužné rutiny. Další informace najdete v tématu Zpracování událostí.

  • cssClassName – poskytuje vložené položce názvy tříd CSS, které umožňují řídit styl vloženého prvku iframe pomocí šablon stylů CSS.

  • phasedEmbedding – zlepšuje prostředí koncového uživatele tím, že vývojářům poskytuje větší flexibilitu pro vkládání sestav fází. Další informace najdete v tématu Použití fázovaného vkládání.

Spuštění sestavy Power BI

powerbi.bootstrap je metoda, která vývojářům pomáhá rychleji vkládat položky Power BI a dosáhnout lepšího výkonu. Další informace najdete v tématu Použití bootstrapu pro lepší výkon.

<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>

Pokud chcete sestavu vložit po spuštění, aktualizujte embedConfig (alespoň accessToken a embedUrl).

Angular demo

Úložiště Angular obsahuje ukázku, která vloží ukázkovou sestavu pomocí komponenty PowerBIReportEmbed. Ukazuje úplný tok od spuštění sestavy až po vložení a aktualizaci vložené sestavy. Ukazuje také použití knihovny powerbi pro vytváření sestav odstraněním vizuálu ze sestavy po kliknutí na tlačítko Odstranit vizuál. Nastaví také událost DataSelected.

Další informace najdete v části ukázky souboru readme.

animovaný gif, který zobrazuje ukázku Power BI Angular.

Spuštění ukázky

Ukázka je podsložka v úložišti. Pokud chcete spustit ukázku na místním hostiteli, postupujte takto:

  1. Spusťte následující příkazy:

    npm run demo

  2. Pokud chcete zobrazit v prohlížeči, přesměrujte ho na http:/localhost:4200/.

Související obsah

  • Last updated on