Aurelia路由-防止每次交换视图以实例化新的视图模型

Question

我的问题是:当我们在路由器中的视图之间交换时，是否可以保持路由器视图的相同视图模型实例？

我解释了我的问题:我想让路由器子组件通过EventAggregator进行通信。我的一个路由器子组件在单击按钮时发布一条消息，另一个则订阅它。

以下是订阅该事件的组件中的代码：

constructor(private ea: EventAggregator) {
  ea.subscribe(GameInfo, msg => console.log(msg));
}

当我单击按钮时，我会在控制台中看到多个日志(或无日志)，这取决于我导航到订阅视图的时间。

以下是我的路由器组件：

import {Router, RouterConfiguration} from 'aurelia-router';

export class Playground {
  public router: Router;

  public configureRouter(config: RouterConfiguration, router: Router) {
    config.map([
      { route: ['', 'media-creator'], name: 'media-creator', moduleId: './media-creator/media-creator', nav: true, title: 'Media Creator' },
      { route: 'board-initializer', name: 'board-initializer', moduleId: './board-initializer/board-initializer', nav: true, title: 'Board Initializer' },
      { route: 'code-editor', name: 'code-editor', moduleId: './code-editor/code-editor', nav: true, title: 'Code Editor' }
    ]);

    this.router = router;
  }
}

我想发送信息从委员会初始化到代码编辑器，我需要保持状态的每个组件时，我导航通过路由器。

也许不可能阻止这种机制，我的解决方案是使用引导导航选项卡/数据切换。

谢谢你对此提出的见解。

Answer 1

首先，考虑事件侦听器多次添加的问题--您需要更改添加它的方式，然后确保在分离当前VM时删除它。

下面，我从优秀的ILikeKillNerds.com博客中提取了代码--老实说，这有时是个救星。

https://ilikekillnerds.com/2016/02/working-with-the-aurelia-event-aggregator/

import { inject } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class MyClass {
    constructor(EventAggregator) {
        this.ea = EventAggregator;
    }

    attached() {
        this.subscriber = this.ea.subscribe('puppyMonkeyBaby', response => {
            console.log(response.testValue);
        });
    }

    detached() {
        this.subscriber.dispose();
    }
}

正如您所看到的，事件侦听器被添加到attached()方法中，然后重要的是当VM被分离到detached()中时被删除(这并不奇怪)。

存储状态更加困难，因为Mgiesa已经介绍了几种不同的方法来处理它，它实际上取决于您的用例。

就我个人而言，我会考虑使用一个类作为单例，它被注入到每个不同的视图模型中，并允许您共享状态。

再一次，是优秀的ILikeKillNerds.com提供了一个很棒的博客；

https://ilikekillnerds.com/2016/02/shared-state-in-aurelia/

注入到视图模型中的任何类(不使用NewInstance.of())都将被视为单例。

Answer 2

最近，我看到了很多关于在导航的同时保持状态的问题。当不再需要时，视图模型将被解构，因此您无法使用您所显示的路由器配置从视图模型本身中维护状态。

你有两个选择：

1)将服务注入到两个视图模型中，这些视图模型需要在该服务中的队列中通信和跟踪消息。当您在周围导航时，检查队列并按顺序处理消息。这不是完美的解决方案，但只要队列不太大，它就能工作。

2)创建一个单一路由，并在表示哪个页面应该可见的路由中添加一个参数，然后将页面上的两个视图模型作为组件，并将show.bind放在路由参数上。当您想切换组件时，仍然调用router.navigateToRoute()，但指向相同的路由(只需更改组件可见的参数)。您还需要将激活策略设置为"invokeLifecycle“，以便调用视图模型的路由器生命周期挂钩，并处理路由参数的值。这里的好处是，这两个组件的视图模型将保持活动状态，这样它们就可以继续相互传递消息，并且仍然看起来像是在页面之间导航。如果您不想更新URL，那么当然可以跳过所有这些，只需在本地跟踪一个变量。

当我到达计算机时，我可以写出一个代码示例。

另外，请注意，不要订阅构造函数中的事件聚合器，因为正如您已经注意到的，您将获得多个订阅。在“激活”或“附加”中订阅，然后在停用或断开时取消订阅。