SAPUI5 - 标题、侧边栏和导航

Question

我是 SAPUI5 的新手，我在导航、侧边栏和标题方面遇到了一些问题。我想开发一个带有标题和侧边栏的应用程序。为此，我使用了“ToolPage”。每个页面都包含工具页面，如下所示：

<mvc:View >
    <tnt:ToolPage id="toolPageId">
        <tnt:header>
            <core:Fragment ...> </core:Fragment>    
        </tnt:header>
        <tnt:sideContent id="SideContentId">
            <core:Fragment ...> </core:Fragment>
        </tnt:sideContent>
        <tnt:mainContents>
            <NavContainer id="pageContainerId" width="100%">
                <Page ...>
                    <content>
                         ...
                         ...
                    </content>
                </Page>
             </NavContainer>
        </tnt:mainContents>
    </tnt:ToolPage>
</mvc:View>

它们都与此类似，只是在内容标签中有不同的代码。

有了这个，我实现了我想要的布局，并使用 manifest.json 中的路由进行导航。我为每个页面都有一个控制器，并使用以下命令导航：

onNavToBeTask: function(oEvent) {
        this.getRouter().navTo("pageTasklist");
}

我现在遇到的问题是，每次导航时，标题和侧边栏都会再次加载，并且侧边栏中的错误字段将突出显示。

我找到了一个示例，但这里包含 .xml 和 .js 文件中的所有代码，这些代码非常不清楚 https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap .tnt.sample.ToolPage/代码

我的问题是：

• 一般来说，使用侧边栏和标题导航的最佳方式是什么？
• 有一个带有标题和侧边栏的“母版”并将内容添加到内容标签会更好吗？
• 或者我应该在侧栏中选择正确的字段，并在导航到页面时调用一个函数？

编辑：

示例屏幕截图，我想实现的目标

Answer 1

据我从您的帖子中了解到，您有一个主视图（母版页），其中包含 ToolPage 和 SideNavigation。

您希望将视图放入 ToolPage 的 mainContents 标记内。如果是这种情况：您不应该使用路由器。因为使用路由器，您将离开主视图。

我在这里列出了你应该做什么：

1. 将视图创建为单独的视图文件。（XML 或 JS）假设您创建 View1。

2. 为菜单项的按钮单击（点击）创建事件处理程序。这应该转发到主视图的控制器。（事件总线）

3. 在主视图的控制器中，创建一个函数来实例化 View1。实例化后，将 View1 添加到 ToolPage 的 ScrollContainer（或 NavContainer）的内容中。

像这样的东西：

onGoToProductTable: function(oEvent) {
var oScrollContainer = sap.ui.getCore().byId("idScrollContainer");
var oCurrentView = oScrollContainer.getContent();
if (!oCurrentView[0]) {
        var view = sap.ui.getCore().byId("ProductTable");
        if (view === undefined) {
            view = sap.ui.view({
                type: sap.ui.core.mvc.ViewType.JS,
                viewName: "xxx.yyy.view.ProductTable"
            });
        }
        oScrollContainer.addContent(view);
}},