Angular中mgt-person组件无法渲染，getAccessToken未触发排查

针对你遇到的mgt-person组件不显示、getAccessToken从未被调用的问题，可以从以下几个方向排查解决：

• 确保MGT组件已完成Angular环境注册
  由于你安装的是@microsoft/mgt-components和@microsoft/mgt-element，需要手动注册自定义元素并让Angular识别它们：

  1. 在main.ts中添加组件注册代码：

     import { defineCustomElements } from '@microsoft/mgt-components/loader';
     
     defineCustomElements();
     

  2. 在AppModule中声明CUSTOM_ELEMENTS_SCHEMA，允许Angular解析自定义标签：

     import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
     
     @NgModule({
       declarations: [AppComponent],
       imports: [BrowserModule],
       providers: [],
       bootstrap: [AppComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     export class AppModule { }
     

• 修复方法的上下文绑定问题
  直接将组件方法传递给SimpleProvider会导致this上下文丢失，即使后续触发调用也会出错，甚至可能提前阻止方法被调用。可以用两种方式绑定：
  方式一：用箭头函数包裹传递：

  Providers.globalProvider = new SimpleProvider(
    (options) => this.getAccessToken(options),
    () => this.login(),
    () => this.logout()
  );
  

  方式二：在构造函数中绑定方法：

  constructor(private oidc: YourOidcService, private auth: YourAuthService) {
    this.getAccessToken = this.getAccessToken.bind(this);
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
  }
  

• 手动触发组件数据加载
  如果组件初始化早于Provider状态设置，可能不会自动发起请求。可以手动获取组件实例并调用load()方法：

  1. 给模板中的mgt-person添加模板引用：

     <mgt-person #personRef person-query="me" view="twoLines"></mgt-person>
     

  2. 在组件中获取引用并在状态设置后触发加载：

     import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';
     import { Person } from '@microsoft/mgt-components';
     
     export class AppComponent implements OnInit, AfterViewInit {
       @ViewChild('personRef') personRef: ElementRef<Person>;
     
       ngOnInit() {
         Providers.globalProvider = new SimpleProvider(
           (options) => this.getAccessToken(options),
           () => this.login(),
           () => this.logout()
         );
       }
     
       ngAfterViewInit() {
         this.oidc.getUserComputed().subscribe(() => {
           Providers.globalProvider.setState(ProviderState.SignedIn);
           this.personRef.nativeElement.load(); // 手动触发数据加载
         });
       }
     
       // ...其他方法
     }
     

• 验证Provider状态设置是否生效
  可以添加日志确认用户加载状态和Provider状态是否正确设置：

  this.oidc.getUserComputed().subscribe(user => {
    console.log('已加载用户:', user);
    Providers.globalProvider.setState(ProviderState.SignedIn);
    console.log('当前Provider状态:', Providers.globalProvider.state);
  });
  

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