Question

我是Angular 2和office js的新手。我读了一下displayDialogAsync并创建了一个样本。

我的工作样本现在显示html页面，但我想在office js对话框中显示角度2组件，然后尝试将其重定向到不同的域。

HTML页面：Waiting.html（仅等待2秒）

app.Component.html :::

<div>

<router-outlet></router-outlet>
    <br /> Testing...
    <div class="ms-Grid">
        <div class="ms-Grid-row">
            <div class="ms-Grid-col">
                <input type="button" value="OpenDialog" (click)="openDialog()" />
            </div>
        </div>
    </div>
</div>

组件：AppComponent

import { Component, OnInit, Input } from '@angular/core';
import { WordService } from './office/word.service';
import { Router, ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, RouterStateSnapshot, Event, UrlSerializer } from '@angular/router';
import { Location } from '@angular/common'

@Component({
    moduleId: module.id,
    selector: 'addin',
    templateUrl: 'app.component.html',
    providers: [WordService]
})

export class AppComponent implements OnInit {
    title: string = 'Angular 2 Excel Add-in';
    private newURL: string;
    constructor(private wordService: WordService, private _router: Router, private _activatedroute: ActivatedRoute,
        private urlSerializer: UrlSerializer,
        private location: Location) {}
    ngOnInit() { }

    openDialog() {

        this.newURL = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') + "/Waiting.html";
        Office.context.ui.displayDialogAsync(this.newURL, { height: 50, width: 50 });
        //Office.context.ui.displayDialogAsync(this._router.navigate(['login/test']), { height: 20, width: 20 });        
    }
}

预期结果：

在对话框中显示任何组件，然后重定向到customdomin并从customdomain获取响应并将其传递给我们的办公室加载项。

请帮帮我。

提前致谢。

Answer 1

在您等待更好的答案时，请查看本文Dialog API in Office Add-ins的最后一部分，该部分是关于在单页加载项中使用该对话框。

带有Angular 2的DialogAPI：使用displayDialogAsync

1 个答案: