Angular5中PowerBI嵌入（用户拥有数据模式）功能无法运行

嘿，看起来你已经在 Angular 5 中搭建 Power BI 嵌入（用户拥有数据模式）的路上走了不少步骤了！我来帮你把现有工作梳理清楚，同时补充后续关键的实现要点：

已完成的准备工作 #

• 安装核心依赖包：powerbi 和 powerbi-client
• 创建 Azure AD 应用，并为其授予 Power BI API 的全部权限

当前组件代码片段 #

注：你的代码目前不完整，我先整理已给出的部分：

import { Component, OnInit } from '@angular/core';
import * as pbicli from 'powerbi-client';
import {AuthenticationService} from '../authentication';

@Component({
  selector: 'app-powerbi-qna',
  templateUrl: './power...

后续关键实现步骤 #

要完成完整的嵌入功能，你还需要补充以下核心内容：

1. 完善认证逻辑（依托你的 AuthenticationService） #

在用户拥有数据模式下，需要获取当前用户的 Power BI 访问令牌，你的 AuthenticationService 要实现通过 Azure AD 获取针对 Power BI 资源的有效令牌，大致逻辑：

• 调用 Azure AD 的授权端点，申请包含 Power BI 权限的 access_token
• 在组件中注入 AuthenticationService，获取令牌后传入 Power BI 嵌入配置

2. 编写组件内的嵌入配置与初始化逻辑 #

完善组件类的实现，示例代码如下：

export class PowerbiQnaComponent implements OnInit {
  private powerbiService: pbicli.Service;
  private embedConfig: pbicli.IEmbedConfiguration;
  private embedContainer: HTMLElement;

  constructor(private authService: AuthenticationService) {
    // 初始化 Power BI 服务实例
    this.powerbiService = new pbicli.Service(pbicli.factories.hpmFactory, pbicli.factories.wpmpFactory);
  }

  ngOnInit(): void {
    // 获取 Power BI 令牌并初始化嵌入
    this.authService.getPowerBiAccessToken().subscribe(token => {
      this.embedConfig = {
        type: 'report', // 可按需改为 dashboard/qna 等类型
        id: '你的 Power BI 报表ID',
        embedUrl: '你的报表专属嵌入URL',
        accessToken: token,
        settings: {
          panes: {
            filters: { visible: false },
            pageNavigation: { visible: true }
          }
        }
      };

      // 获取页面中的嵌入容器元素
      this.embedContainer = document.getElementById('powerbi-embed-container');
      // 执行嵌入操作
      this.powerbiService.embed(this.embedContainer, this.embedConfig);
    });
  }
}

3. 完善模板文件（对应 templateUrl 的 HTML） #

在模板中添加用于承载 Power BI 内容的容器：

<div id="powerbi-embed-container" style="width: 100%; height: 700px;"></div>

4. 嵌入事件监听（可选但推荐） #

可以监听 Power BI 的各类事件，比如加载完成、错误触发等，提升用户体验：

// 在嵌入操作后添加事件监听
const embeddedReport = this.powerbiService.get(this.embedContainer);
embeddedReport.on('loaded', () => {
  console.log('Power BI 内容加载完成');
});

embeddedReport.on('error', (event) => {
  console.error('嵌入过程出错:', event.detail);
});

关键注意事项 #

• 确保 Azure AD 应用的重定向 URI与你的 Angular 应用地址完全匹配
• 确认当前登录用户拥有你要嵌入的 Power BI 内容的访问权限（用户拥有数据模式下，内容归属当前用户）
• 如果嵌入后出现交互异常，可尝试在 ngZone.runOutsideAngular 中执行嵌入操作，规避 zone.js 的影响

内容的提问来源于stack exchange，提问作者Unnie