相关疑难解决方法(0)

我正在尝试routerCanDeactivate在我的应用程序中使用该功能.使用它的简单方法如下:

routerCanDeactivate() {
    return confirm('Are you sure you want to leave this screen?');
}

我唯一的问题是它很难看.它只是使用浏览器生成的确认提示.我真的想使用自定义模态,如Bootstrap模式.我有Bootstrap模式根据他们单击的按钮返回true或false值.在routerCanDeactivate我执行可以接受真/假值或解析为真/假的承诺.

以下是具有以下routerCanDeactivate方法的组件的代码:

export class MyComponent implements CanDeactivate {
    private promise: Promise<boolean>;

    routerCanDeactivate() {
        $('#modal').modal('show');
        return this.promise;
    }

    handleRespone(res: boolean) {
        if(res) {
            this.promise.resolve(res);
        } else {
            this.promise.reject(res);
        }
    }
}

当我的TypeScript文件编译时,我在终端中收到以下错误:

error TS2339: Property 'resolve' does not exist on type 'Promise<boolean>'.
error TS2339: Property 'reject' does not exist on type 'Promise<boolean>'.

当我尝试离开组件时,模态启动,但随后组件停用并且不等待承诺解析.

我的问题是尝试计算Promise,以便该routerCanDeactivate方法等待解决的承诺.有没有理由说错误说没有'resolve'财产Promise<boolean>？如果我可以解决这个问题,我必须在routerCanDeactivate …

我不想在问题/答案中建议使用angular2-bootstrap或ng2-bs3-modal Angular 2 Bootstrap Modal 和Angular 2.0 and Modal Dialog

现在.我知道什么打开和关闭引导模式.

• 显示屏在display: none;和之间切换display: block;
• 一个属性可打开,div之间aria-hidden="true"并aria-hidden="false

所以,我自然认为如果我这样绑定aria-hidden属性[aria-hidden]="true",我就可以操纵它.可悲的是,我不能约束,aria-hidden因为它不是一个已知的属性div.(注意,attr.aria-hidden不存在)

我知道这可以用JQuery实现$('#myModal').modal()如下问题所示如何使用jQuery打开一个Bootstrap模式窗口？

所以我的问题是,是否有一个TypeScript功能modal()与JQuery 做同样的事情,或者有没有办法将函数/变量绑定到aria-hidden？

我目前html:

<div id="createAccountModal" class="modal fade customForm" role="dialog" [aria-hidden]="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create account</h4>
            </div>
            <div class="modal-body">
               <p>Lorem ipsum</P>
            </div>
            <div class="modal-footer align-left">
                My custom footer
            </div>
        </div> …

在 angular 4.3 中，我想打开一个模态弹出窗口并显示一个嵌入的 pdf 文件，如下所示：https : //pdfobject.com/static.html

我使用了这个答案中的模态弹出组件，它可以很好地弹出。我的模态测试 html 如下所示：

<a class="btn btn-default" (click)="setContent();modal.show()">Show</a>
<app-modal #modal>
  <div class="app-modal-header">
    Testing pdf embedding
  </div>
  <div class="app-modal-body">
    <div class="embed-responsive" *ngIf="ContentUrl">
      <object [attr.data]="ContentUrl"
              type="application/pdf"
              class="embed-responsive-item">
        <embed [attr.src]="ContentUrl"
               type="application/pdf" />
      </object>
    </div>
    <p><a [href]="ContentUrl">PDF Download</a></p>
  </div>
  <div class="app-modal-footer">
    <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
  </div>
</app-modal>

在我的组件中，我ContentUrl是这样设置的：

public ContentUrl: SafeUrl;
public setContent() {
    this.ContentUrl = this._sanitizer.bypassSecurityTrustResourceUrl("/img/test.pdf");
}

弹出窗口很好地打开，但它没有显示嵌入的 pdf。它甚至不会尝试从服务加载 url。下载链接运行良好，并询问是否应将 pdf 保存到光盘或打开。
我也尝试将 pdf 嵌入弹出窗口之外也无济于事。
我尝试了 Chrome、Edge 和 …