如何实现点击按钮时在Angular中打开SmartField任务窗格？

你提供的manifest.xml中Button控件配置已经正确使用了ShowTaskpane动作，接下来只需完成Angular端的对应配置和组件开发，即可实现点击按钮打开指定任务窗格的功能，步骤如下：

1. 确认Manifest配置的资源映射 #

确保Manifest的Resources节点中，与按钮相关的资源路径和字符串都正确映射：

<Resources>
  <bt:Urls>
    <!-- 指向Angular项目中任务窗格组件的路由地址 -->
    <bt:Url id="SmartField.Url" DefaultValue="https://localhost:4200/smart-field" />
  </bt:Urls>
  <bt:Images>
    <bt:Image id="smart_field_16x16" DefaultValue="assets/icons/smart-field-16.png" />
    <bt:Image id="smart_field_32x32" DefaultValue="assets/icons/smart-field-32.png" />
    <bt:Image id="smart_field_80x80" DefaultValue="assets/icons/smart-field-80.png" />
  </bt:Images>
  <bt:ShortStrings>
    <bt:String id="SmartFieldButton.Label" DefaultValue="智能字段" />
  </bt:ShortStrings>
  <bt:LongStrings>
    <bt:String id="SmartFieldButton.Tooltip" DefaultValue="打开智能字段任务窗格" />
  </bt:LongStrings>
</Resources>

2. 创建Angular任务窗格组件 #

生成对应任务窗格的组件文件，编写业务逻辑：

// smart-field-taskpane.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-smart-field-taskpane',
  templateUrl: './smart-field-taskpane.component.html',
  styleUrls: ['./smart-field-taskpane.component.css']
})
export class SmartFieldTaskpaneComponent implements OnInit {

  ngOnInit(): void {
    // 初始化Office API，确保插件能与Office客户端交互
    Office.onReady().then(() => {
      // 在这里添加任务窗格的初始化逻辑，比如读取文档数据
    });
  }
}

3. 配置Angular路由 #

在路由模块中添加任务窗格的路由规则，确保Manifest中配置的URL能正确匹配到组件：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SmartFieldTaskpaneComponent } from './smart-field-taskpane/smart-field-taskpane.component';

const routes: Routes = [
  { path: 'smart-field', component: SmartFieldTaskpaneComponent },
  // 其他项目路由...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 测试运行 #

• 启动Angular项目（Office插件要求HTTPS）：ng serve --ssl
• 使用Office插件调试工具加载配置好的Manifest文件，点击工具栏中的「智能字段」按钮，即可打开对应的任务窗格。

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