microsoft-teams - MSTeams 配置页面 Angular 12 SPA 与路由

问题描述

我正在使用 Angular 12 并且正在编写一个简单的组选项卡应用程序。我正在处理配置页面组件，html 如下所示：

<br />
<br />
<br />
<p>Configuration 3</p>
<input type="text" placeholder="Some Test" />

在普通浏览器中，会出现文本和框。但是，如果我尝试通过安装到选项卡路径来做同样的事情，我根本不会得到文本或输入框。

我认为这可能与路由有关，但无法确认。

app-routing-module 非常简单：

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'configuration',
    component: ConfigurationComponent,
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      initialNavigation:
        !BrowserUtils.isInIframe() && !BrowserUtils.isInPopup()
          ? 'enabled'
          : 'disabled',
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

那么，当在团队中使用 SPA 时，如何让 SPA 路由到配置页面？

配置组件：（更改 URL 目的是为了保护无辜者）

import { Component, OnInit } from '@angular/core';
import { Inject, AfterViewInit, ElementRef } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import * as microsoftTeams from '@microsoft/teams-js';

@Component({
  selector: 'app-configuration',
  templateUrl: './configuration.component.html',
  styleUrls: ['./configuration.component.scss'],
})
export class ConfigurationComponent implements OnInit, AfterViewInit {
  constructor(
    @Inject(DOCUMENT) private document: Document,
    private elementRef: ElementRef
  ) {}

  ngOnInit(): void {
    microsoftTeams.initialize();
  }

  ngAfterViewInit() {
    console.log('Initializing ms teams');

    microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
      microsoftTeams.settings.setSettings({
        entityId: '',
        contentUrl: 'https://test.ngrok.io',
        suggestedDisplayName: 'Test',
        websiteUrl: 'https://test.ngrok.io',
      });
      saveEvent.notifySuccess();
    });

    console.log('Register on save');
    microsoftTeams.settings.setValidityState(true);
  }
}

谢谢，尼克

标签： microsoft-teams

microsoft-teams - MSTeams 配置页面 Angular 12 SPA 与路由

问题描述

解决方案

推荐阅读