attachRoutePatternMatched() 和 attachMatched() 在每次导航时调用多次

Question

我想在 UI5 中每次切换视图时触发一个事件。
为了避免代码重复，我在 BaseController 中定义了一个 attachRoutePatternMatched()，所有视图的控制器都基于：

onInit() {

    const router = this.getOwnerComponent().getRouter();

    router.attachRoutePatternMatched((event) => {

        this.onViewSwitch(event);

    }, this);

},

onViewSwitch(event) {

    console.log("Bingo, a view switch occurred!");

}

它有效，但问题是 onViewSwitch() 被多次调用，例如，如果我放置一个断点，那么我多次到达此函数，尽管只是在 SideNavigation 中进行了一次导航tnt:sideContent 组件内部。

我还尝试用 attachMatched() 替换 attachRoutePatternMatched() 并提供特定的视图名称：

router.getRoute("wantedView").attachMatched((event) => {

    this.onViewSwitch(event);

}, this);

但仍然在每次导航时到达 onViewSwitch() 内的断点大约 5 次。

我不明白的是，为什么 onViewSwitch() 被调用了那么多次？

更新：

将 attachRoutePatternMatched() 从 BaseController 的 onInit() 移动到 rootView 控制器的 onInit() 解决了这个问题，但我仍然很好奇知道为什么 onViewSwitch() 在 BaseController 的 onInit().

中被定义多次

Answer 1

您几乎已经在最新更新中回答了您的问题。

每个视图都会调用一次 onInit。换句话说，即使您编码一次，每个视图都有一个 onInit。

每次 onInit 回调，您都会创建一个本地回调函数。

() => {
 this.onViewSwitch(event);
}

所以最后，一旦事件发生，所有之前注册的回调都会被调用。因此，您有许多回调在事件发生时做几乎相同的事情 - 这可能会导致奇怪的行为，例如应用程序变得越来越慢，具体取决于您在回调中所做的事情。

请注意，您的场景中的事件本身并不是问题所在。但是，请记住，某些事件可以在 Router class 和 Route class 中找到，并且它们的行为是不同的，因为第一个对任何路线都有效后者只对调用attach函数时使用的路由有效。

最后，考虑在 Component.js 中执行您的逻辑，因为 Router 可能在那里声明，除非您正在更改应用程序的基本结构。您可以为 Component 的 onInit 内的 Router 的任何事件注册回调。

attachRoutePatternMatched() 和 attachMatched() 在每次导航时调用多次

attachRoutePatternMatched() and attachMatched() called multiple times at every navigation

sapui5