How do I use <ons-navigator> from an <ons-tabbar> page?

[vgriffin]

I’m using Angular 4, onsenui 2.5.3, and ngx-onsenui 4.1.0. I want to have the <ons-tabbar> always displayed, but I want other pages to be part of the app as well. Without the tabbar, I could use an <ons-navigator> to move around as desired. I’ve read everything I could find and think the right solution is to put the ons-navigator where a page invoked by an ons-tab can find it.

I’m doing pretty strict separation between my Component code and the html, placing templates and css into separate files, and minimizing use of scripts in the html.

I haven’t been able to figure out where to put the <ons-navigator> element where the Component’s constructor will find it! Every place I’ve tried has resulted in “ERROR Error: No provider for OnsNavigator!” if I try to inject an OnsNavigator into the constructor.

It may be a problem caused by wrapping all managed elements inside <ons-page>, which could make it difficult to solve if that upsets <ons-navigator> handling.

[asial-matagawa]

Hi, @vgriffin .

ERROR Error: No provider for OnsNavigator! appears when the component is not a descendant of <ons-navigator>.

Basically, if you want to access ons-navigator, ons-tabbar, ons-splitter, ons-splitter-content and ons-splitter-side, we recommend you creating a service which stores a reference to each component.

Thank you.

[vgriffin]

I had, in fact, tried placing <ons-navigator> around my <ons-page>, inside my <ons-page> around all of the content, and as a landing page from <ons-tab>, using the [page] directive to point to my page.

I have tried every way I can think of to make my <ons-page> a child of an <ons-navigator>

The last variant worked without using the <ons-tabbar> and <ons-tab> elements. I suspect that the <ons-navigator> needs to be the outermost item from things I’ve seen in the documentation, but if I try to go there from an <ons-tab>, the code wraps the <ons-navigator> in <ons-page>.

What I would really like to see is sample code that actually does what I want.

If I create a service, is it sufficient to create a Component where the template is just: <ons-navigator></ons-navigator> and the constructor gets the OnsNavigator injected. Then can I just retrieve the navigator using that navigator? I’ve now tried several ways to create a service, but still haven’t figured out how to get an OnsNavigator into anything to use as a service. I don’t know how to instantiate a component directly in a service.
I want the navigator and tabbar to be available simultaneously. According to everything I’ve read, a Component is part of the DOM and associated with the View process. This seems to imply that any Component containing an <ons-navigator> would itself have to be “between” the tabbar and its viewable area, or it wouldn’t work. I have not figured out how to make one work.

If it’s possible to create an <ons-tabbar> where multiple button targets are <ons-navigator> elements, using the current ngx-onsenui and onsenui, there should be a test case for it. If so, please post it. If there isn’t a test case, maybe it doesn’t actually work. I’ve used every example I can find, and variations on them. I hope I’m just overlooking something obvious. I don’t have nearly as much experience in Angular 4 or Onsen UI as I do in many other languages, so it may well be something I’m doing.

I have gotten <ons-navigator> and <ons-tabbar> elements working, and I like them. I just can’t figure out how to get them to work together.