如何在Microsoft Teams自定义Angular应用中获取深度链接的threadId参数

要捕获深度链接里的threadId参数，不能直接用window.location——因为Teams会把你的Angular应用嵌入iframe运行，window.location只能拿到应用自身的URL。你需要借助Microsoft Teams JavaScript SDK来获取启动应用的深度链接参数，具体操作如下：

• 安装Teams JavaScript SDK
  在Angular项目根目录执行命令：

  npm install @microsoft/teams-js
  

• 在Angular组件中初始化SDK并提取参数
  修改app.component.ts，导入SDK并在组件初始化时完成参数获取：

  import { Component, OnInit } from '@angular/core';
  import * as microsoftTeams from '@microsoft/teams-js';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    threadId?: string;
  
    ngOnInit(): void {
      // 初始化Teams SDK
      microsoftTeams.initialize(() => {
        // 直接获取深度链接的查询参数
        microsoftTeams.getDeepLinkQueryParameters((params) => {
          this.threadId = params.threadId;
          // 可将参数存储到服务、localStorage或直接使用
          console.log('threadId:', this.threadId);
        });
      });
    }
  }
  

  如果你使用的是旧版Teams SDK（v1.x），没有getDeepLinkQueryParameters方法，可以通过getContext解析entityUrl来获取参数：

  microsoftTeams.initialize(() => {
    microsoftTeams.getContext((context) => {
      const urlParams = new URLSearchParams(new URL(context.entityUrl).search);
      this.threadId = urlParams.get('threadId');
      console.log('threadId:', this.threadId);
    });
  });
  

• 验证manifest配置
  确保Teams应用manifest中静态标签页的entityId与深度链接里的xid一致，这样Teams才能正确将深度链接参数传递给你的应用。

注意：必须在Teams客户端（桌面/网页/移动端）中打开应用才能获取到参数，本地直接打开Angular应用无法触发Teams SDK的相关逻辑。

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