SAPUI5/OPENUI5 - 使用对话框路由

Question

我目前坚持使用路由和对话框的组合。我有一个包含列表元素的视图，当我单击列表中的一个元素时，我希望在对话框（弹出窗口）中显示详细信息视图。问题是，我还想要 url 中列表元素的 ID，当我在对话框仍然打开时重新加载页面时，我想再次跳转到这个确切位置（对话框处于全屏状态，它貌似是自己的看法）。

所以，到目前为止我得到了什么：

当我点击列表中的一个元素时，我调用这个函数

campaignSelectHandler : function () {
    if(!this.fragment) {
        var controller = new sap.ui.controller("ui.controls.fragments.EventDetail");
        this.fragment = sap.ui.xmlfragment("ui.controls.fragments.EventDetail", controller);
    }
    //this.router.navTo(navigation.Constants.EventDetailFragment, {id : 12345});
    this.router.navTo(navigation.Constants.EventDetailFragment, {id: 1337});
    this.fragment.open();
},

接下来我跳转到我的片段

<Dialog     id="dialogEventDetail"
        xmlns:view="ui.views.pages"
        xmlns="sap.m"
        xmlns:controls="ui.controls"
        xmlns:core="sap.ui.core"
        xmlns:mvc="sap.ui.core.mvc"
        contentWidth="100%" contentHeight="100%"
        showHeader="false"
        class="eventDetail"
        horizontalScrolling="false"
        verticalScrolling="false">

<mvc:XMLView viewName="ui.views.pages.EventDetail">

</mvc:XMLView>

</Dialog>

在这个对话框片段中，我加载了我的视图，包括我的控制器等。这适用于打开对话框并显示 url 路径，但很明显，一旦我重新加载页面，一切都消失了。

除此之外，我从启动路由器的 AbstractController 扩展了 "ui.views.pages.EventDetail" 视图。它在我的普通视图中工作正常，但是当我打开对话框时，我丢失了对它的引用并且无法返回到我的初始视图。

我知道这个解决方案行不通，所以希望您能就如何让它发挥作用提出一些建议！

提前致谢！

顺便说一句：这是 Component.js

routes : [
            {
                pattern : "",
                name : navigation.Constants.MyEvents,
                view : navigation.Constants.MyEvents,
                viewId : navigation.Constants.MyEvents,
                targetAggregation : "pages",
                targetControl : "idAppControl",
                subroutes : [
                    {
                        pattern : "{id}",
                        name : navigation.Constants.EventDetailFragment,
                        view : navigation.Constants.EventDetailFragment
                    }
                ]
            }

Answer 1

刷新时会调用您的 attachRouteMatched 方法。

onInit: function() {
    var _this = this
    var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
    //can also use directly this.oRouter.attachRouteMatched(...)
    //I see you using this.router 
    oRouter.attachRouteMatched(function(oEvent) {
        if (oEvent.getParameter("name") !== navigation.Constants.EventDetailFragment) {
            return:
        }
        try {

            var oHasher = new sap.ui.core.routing.HashChanger();
            var hash = oHasher.getHash(); //this will get everything which is in URL after #
            //TODO : split the hash accordingly and find the event id and open your dialog and assign to oEventId
            if (!_this.fragment) {
                var controller = new sap.ui.controller("ui.controls.fragments.EventDetail");
                _this.fragment = sap.ui.xmlfragment("ui.controls.fragments.EventDetail", controller);
            }
            _this.router.navTo(navigation.Constants.EventDetailFragment, {
                id: oEventId
            });
            _this.fragment.open();
        } catch (e) {
            jQuery.sap.log.warning("Couldn't find the right event")
        }
    }, this);
}

实际上，您可以重用 campaignSelectHandler，只需更改签名实现，使其接受 eventId

希望对您有所帮助

SAPUI5/OPENUI5 - 使用对话框路由

SAPUI5/OPENUI5 - Routing with Dialogs

routing

dialog

sapui5