Angular Outlook在Taskpane中的绑定问题

发布于 2025-02-10 16:44:20 字数 3076 浏览 2 评论 0原文

我是Outlook附加任务窗格的新手。使用Yeoman Generator创建了加载项。默认创建的应用程序可以使用command.ts代码正常工作，但是Taskpane的代码没有执行。角度数据结合不起作用。

清单文件没有更改。它由生成器创建的默认值。我认为已经生成的命令窗格正常工作，但任务窗格与Angular有关。我尝试打开https：// localhost：3000/taskpane.html，它可以在浏览器中完美工作，但无法通过加载项打开的屏幕工作。

添加浏览器控制台从Outlook Web视图结果。没有错误。

taskpane.html

<body class="ms-font-m ms-welcome">
    <h2 id="sideload-msg" className='ms-fontSize-su ms-fontColor-neutralPrimary'>Please sideload your addin to see app body.</h2>
    <app-home></app-home>
</body>

taskpane.ts

/*
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */
import "zone.js"; // Required for Angular
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import AppModule from "./app/app.module";

/* global console, document, Office */

Office.onReady(() => {
 

  // Bootstrap the app
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((error) => console.error(error));
});

app.component.ts

import { Component, NgZone } from "@angular/core";
@Component({
  selector: "app-home",
  templateUrl: "./app.component.html",
})
export default class AppComponent {
// constructor(private zone: NgZone) {
// }
   public welcomeMessage = "Welcome";
   async run() {
   /**
   * Insert your Outlook code here
   */
   // this.zone.run(()=>{
   this.welcomeMessage = "I am changed";
   // })    
   }
}

app.component.html

<header class="ms-welcome__header ms-bgColor-neutralLighter ms-u-fadeIn500">
    <img width="90" height="90" src="../../../assets/logo-filled.png" alt="Contoso Task Pane Add-in" title="Contoso Task Pane Add-in" />
    <h1 class="ms-fontSize-su ms-fontWeight-light ms-fontColor-neutralPrimary">{{welcomeMessage}}</h1>
</header>

<div role="button" class="ms-welcome__action ms-Button ms-Button--hero ms-u-slideUpIn20" (click)="run()">
        <span class="ms-Button-label">Run</span>
        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
</div>

原文

I am new to Outlook add-in task pane. Created the add-in using yeoman generator. Default created application working fine with Command.ts code but the code from TaskPane is not executing. Angular data binding not working.

There is no change in manifest file. Its default created by generator. There is already generated command pane working fine but the task pane is having issue related to Angular I think.
I tried opening the https://localhost:3000/taskpane.html which working perfectly in browser but not working through add-in opened screen.

Adding the browser console results from outlook web view. There is no error.

taskpane.html

<body class="ms-font-m ms-welcome">
    <h2 id="sideload-msg" className='ms-fontSize-su ms-fontColor-neutralPrimary'>Please sideload your addin to see app body.</h2>
    <app-home></app-home>
</body>

taskpane.ts

/*
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */
import "zone.js"; // Required for Angular
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import AppModule from "./app/app.module";

/* global console, document, Office */

Office.onReady(() => {
 

  // Bootstrap the app
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((error) => console.error(error));
});

app.component.ts

import { Component, NgZone } from "@angular/core";
@Component({
  selector: "app-home",
  templateUrl: "./app.component.html",
})
export default class AppComponent {
// constructor(private zone: NgZone) {
// }
   public welcomeMessage = "Welcome";
   async run() {
   /**
   * Insert your Outlook code here
   */
   // this.zone.run(()=>{
   this.welcomeMessage = "I am changed";
   // })    
   }
}

app.component.html

<header class="ms-welcome__header ms-bgColor-neutralLighter ms-u-fadeIn500">
    <img width="90" height="90" src="../../../assets/logo-filled.png" alt="Contoso Task Pane Add-in" title="Contoso Task Pane Add-in" />
    <h1 class="ms-fontSize-su ms-fontWeight-light ms-fontColor-neutralPrimary">{{welcomeMessage}}</h1>
</header>

<div role="button" class="ms-welcome__action ms-Button ms-Button--hero ms-u-slideUpIn20" (click)="run()">
        <span class="ms-Button-label">Run</span>
        <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
</div>

分享到QQ

分享到微博