Question

我正在尝试添加一个弹出窗口，如果满足某些条件，当用户导航到新页面时应该显示该弹出窗口。问题是，即使我向路由器配置添加了一个后期渲染步骤，在由多个自定义元素组成的视图上，它们有时会在执行后渲染步骤后导入资源，这会导致弹出窗口消失并几乎锁定页面。这是一个可重复的小例子：

router.configure(config => {
    config.addPostRenderStep(CustomPostRenderStep);
    return config;
});

...

@inject(DialogService)
class CustomPostRenderStep{
    constructor(
        private mDialogService: DialogService
    ) {
    }

    run(navigationInstruction: NavigationInstruction, next: Next) {
        this.mDialogService.open({
            viewModel: TestModal
            lock: true
        });

        return next();
    }
}

弹出窗口会在屏幕上显示一段时间，然后消失，但是body html标签仍然会有“ux-dialog-open”类。

添加超时会有所帮助，但是在不同系统上超时需要的时间会有所不同，这使得它成为一个不可靠的解决方案。像这样：

@inject(DialogService)
class CustomPostRenderStep{
    constructor(
        private mDialogService: DialogService
    ) {
    }

    run(navigationInstruction: NavigationInstruction, next: Next) {
        window.setTimeout(() => {
            this.mDialogService.open({
                viewModel: TestModal
                lock: true
            });
        }, 200);

        return next();
    }
}

在显示弹出窗口之前等待渲染所有内容的正确方法是什么？

Answer 1

更好的选择是在导航成功后利用路由器触发的事件

https://ilikekillnerds.com/2015/09/understanding-aurelia-router-events/

您可以在应用中订阅def map_coord(x, y): return x-1, y-1并创建对话

路由器：导航：成功

Answer 2

您应该使用TaskQueue以便在下一个渲染循环中调用。请参阅：http://aurelia.io/docs/api/task-queue/class/TaskQueue/method/queueTask

这应该有效：

@inject(DialogService, TaskQueue)
class CustomPostRenderStep {
  constructor(
    private mDialogService: DialogService
        private mTaskQueue: TaskQueue
  ) {
  }

  run(navigationInstruction: NavigationInstruction, next: Next) {
    this.mTaskQueue.queueTask(() => {
      this.mDialogService.open({
        viewModel: TestModal,
        lock: true
      });
    });
    return next();
  }
}

我真的不太了解RenderPipeline，但也许你可以在排队的任务中调用next()。

Answer 3

查看我正在运行的Gist fork，也许您应该通过在aurelia-dialog代码中设置断点来调查关闭对话框的内容。

以下是一个示例：Aurelia Router Demo | PostRenderStep modal dialog example

<强> app.js

import { inject } from 'aurelia-framework';
import { DialogService } from 'aurelia-dialog';
import { TestModal} from 'test-modal';

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      {route: ['', 'home'], name: 'home', moduleId: 'home/home', nav: true, title: 'Home'},
      {route: 'profile', name: 'profile', moduleId: 'profile/profile', nav: true, title: 'Profile'},
      {route: 'settings', name: 'settings', moduleId: 'settings/settings', nav: true, title: 'Settings'}
    ]);
    config.addPostRenderStep(PostRenderStep);
    this.router = router;
  }
}

@inject(DialogService, TestModal)
class PostRenderStep {
  constructor(dialogService, testModal){
    this.dialogService = dialogService;
    this.testModal = testModal;
  }

  run(routingContext, next) {
    this.dialogService.open({
      viewModel: TestModal,
      lock: true
    });

    return next();
  }
}

另外，您使用的是哪个版本？

完成渲染后在所有页面上显示对话框

3 个答案: