Need to Help in nested IconTabBar lazy loading

Hi All,

I need to Implement lazy loading in my app by the Following Scenario,

1. I have Four IcanTabBar. I already used lazyloading concept to load all the views of IcanTabBar. And it's working fine.

2. I also have another three iconTabBar (Subviews) inside the second iconTabBar. How to load the content of that IconTbaBar using LazyLoading Concept?

please find the attached image for the references using the below link.

ModelScreen.png

FolterStructure.png

manifest.Json : 
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "iconT.IconT.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [{
"name": "RouteApp",
"pattern": "RouteApp",
"target": [
"TargetApp"
]
}, {
"name": "Tab22",
"pattern": "Subtab2:?query:",
"target": [
"Subtab22"
]
}, {
"name": "Home",
"pattern": ":?query:",
"target": [
"home"
]
}
],
"targets": {
"TargetApp": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewId": "App",
"viewName": "App"
},
"home": {
"viewType": "XML",
"viewName": "home",
"transition": "slide",
"clearControlAggregation": false
},
"Fioritab2": {
"parent": "home",
"viewPath": "iconT.IconT.view",
"viewName": "tab1",
"controlId": "tab2",
"controlAggregation": "content"
},
"Fioritab3": {
"parent": "home",
"viewPath": "iconT.IconT.view",
"viewName": "tab2",
"controlId": "tab3",
"controlAggregation": "content"
},
"Fioritab4": {
"parent": "home",
"viewPath": "iconT.IconT.view",
"viewName": "tab3",
"controlId": "tab4",
"controlAggregation": "content"
},
"Subtab22": {
"parent": "Fioritab2",
"viewType": "XML",
"viewPath": "iconT.IconT.view.Subtab2",
"viewName": "tab22",
"controlId": "tab22",
"controlAggregation": "content"
},
"Subtab23": {
"parent": "Fioritab2",
"viewType": "XML",
"viewPath": "iconT.IconT.view.Subtab2",
"viewName": "tab23",
"controlId": "tab23",
"controlAggregation": "content"
}
}
}
Home.controller : 


sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/UIComponent"
], function (Controller, UIComponent) {
	"use strict";
    var _aTabKeys = ["tab4","tab2","tab3"];
	return Controller.extend("iconT.IconT.controller.home", {


		/**
		 * Called when a controller is instantiated and its View controls (if available) are already created.
		 * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
		 * @memberOf iconT.IconT.view.home
		 */
		onInit: function () {
			this.oOwnerComponent = this.getOwnerComponent();
			this.oRouter = this.oOwnerComponent.getRouter();
			this.oRouter.attachRouteMatched(this.onRouteMatched, this);
		},


		onRouteMatched: function (oEvent) {
			var oArgs, oQuery;
			oArgs = oEvent.getParameter("arguments");
			oQuery = oArgs["?query"];
			if (oQuery && _aTabKeys.indexOf(oQuery.tab) > -1){
				if (oQuery.tab === "tab4" || oQuery.tab === "tab2" || oQuery.tab === "tab3"){
					this.oRouter.getTargets().display("Fiori" + oQuery.tab);
				}
			} else {
				// the default query param should be visible at all time
				this.oRouter.navTo("Home",true);
			}
		},
		onTabSelect : function(oEvent) {
			this.oRouter.navTo("Home",{
				query : {
					tab : oEvent.getParameter("selectedKey")
				}
			},true);
		}


	});


});

tab2.controller:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/UIComponent"
], function (Controller, UIComponent) {
	"use strict";
	 var _aTabKeys = ["tab22","tab23"];
	return Controller.extend("iconT.IconT.controller.tab1", {


		/**
		 * Called when a controller is instantiated and its View controls (if available) are already created.
		 * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
		 * @memberOf iconT.IconT.view.tab1
		 */
		onInit: function () {
			this.oOwnerComponent = this.getOwnerComponent();
			this.oRouter = this.oOwnerComponent.getRouter();
			this.oRouter.attachRouteMatched(this.onRoutePatternMatched, this);
		},
		onRoutePatternMatched: function (oEvent) {
			var oArgs, oQuery;
			oArgs = oEvent.getParameter("arguments");
			oQuery = oArgs["?query"];
			if (oQuery && _aTabKeys.indexOf(oQuery.tab1) > -1) {
				if (oQuery.tab1 === "tab22" || oQuery.tab1 === "tab23") {
					this.oRouter.getTargets().display("Sub" + oQuery.tab1);
				}
			} else {
				// the default query param should be visible at all time
				this.oRouter.navTo("Tab22", true);
			}
		},
		onTabSelect : function(oEvent) {
			this.oRouter.navTo("Tab22",{
				query : {
					tab1 : oEvent.getParameter("selectedKey")
				}
			},true);
		}
		
	});


});