Add backSegment property to DeepLinkMetadata for dynamic navigation hierarchies

[ionitron-bot]

Original issue by @PatrickMcD on 2017-04-26T16:16:10Z

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request

Feature Request:

From what I've gathered, the deep link system limits us to a single dynamic level in a navigation hierarchy. The defaultHistory array takes strings which correspond to class names of pages (or of the name properties of DeepLinkMetadata objects if used). The issue is that params can't be passed backwards through the history, so hierarchies with multiple dynamic levels are a no-go right now.

I suggest adding a new property to the DeepLinkMetadata type called backSegment, which would look like something like this (assuming you landed on the 3rd level of a dynamic hierarchy):

@IonicPage({
  name: '3rd',
  segment: 'hierarchy/1st/:1stId/2nd/:2ndId/3rd/:3rdId',
  backSegment: 'hierarchy/1st/:1stId/2nd/:2ndId'
})

The backSegment would automatically grab current URL params (1stId & 2ndId) and pass them back through the hierarchy.

Clicking the back button would pop the 3rd level and take you to the 2nd level:

@IonicPage({
  name: '2nd',
  segment: 'hierarchy/1st/:1stId/2nd/:2ndId',
  backSegment: 'hierarchy/1st/:1stId'
})

Rinse and repeat to pop the 2nd and go back to the 1st:

@IonicPage({
  name: '1st',
  segment: 'hierarchy/1st/:1stId',
  backSegment: 'hierarchy'
})

1st pops back to the root of the hierarchy (we are out of params to usher through):

@IonicPage({
  name: 'Hierarchy',
  segment: 'hierarchy',
  backSegment: ''
})

And Hierarchy can pop back to the home/default page of the site:

@IonicPage({
  name: 'Home',

  // Empty segments don't currently work. See links below.
  segment: ''
})

Note also that there is only a single segment string, rather than an array of pages in a history. I don't think a page should have to list its full history. If a page knows its backSegment, and that parent knows its backSegment, etc., the system should be intelligent enough to build the breadcrumb back to the root for a given page.

If you need the whole history at once (perhaps because lazy loading prevents you from inspecting DeepLinkMetadata of parent pages up the hierarchy), then an array of backSegments, while duplicative, would work as well:

@IonicPage({
  name: '3rd',
  segment: 'hierarchy/1st/:1stId/2nd/:2ndId/3rd/:3rdId',

  // or historySegments?
  backSegments: [
    'hierarchy/1st/:1stId/2nd/:2ndId',
    'hierarchy/1st/:1stId',
    'hierarchy',
    ''
  ]
})

---

If possible, it would be cool to ditch the explicit page names in segments and just have params (so this would apply to the current segment property as well as the suggested backSegment). From the example above, it would look like this:

segment: 'hierarchy/:1stId/:2ndId/:3rdId'

The idea here is that pages are "implicit" in the organization of many hierarchies. If you consider the dog taxonomy example, having each layer (Kingdom, Phylum, Class, Order, Suborder, Family, Genus, and Species) in the URL is superfluous:

example.com/taxonomy/Kingdom/Animalia/Phylum/Chordata/Class/Mammalia/Order/Carnivora/Suborder/Caniformia/Family/Canidae/Genus/Canis/Species/C_lupus

vs. "implicit" pages:

example.com/taxonomy/Animalia/Chordata/Mammalia/Carnivora/Caniformia/Canidae/Canis/C_lupus

---

Some links regarding the empty segement, which is how I thought it would work:

• Handle default root and catch-all parameters with deep link system ionic-framework#11363
• IonicPage does not allow for empty segment ionic-app-scripts#888
• https://forum.ionicframework.com/t/ionic-3-deeplinker-base-url/86338