Angular 2 subviews without AUX url

Question

I am trying Angular 2 Routing.

My application has 4 pages and 4 routes (r1, r2, r3, r4). I want to separate the two groups of these pages. The "content 1" field for r1 and r2 will be the same. For r3 and r4, the "Content 1" field will be the same, and the "Content 2" field will change for each route.

I can do this by calling the component in the template, but the "Content 1" field is recompiled.

I do not want to use AUX routing. The url looks ugly.

I could have done this before in Angular 1. How to do this in Angular 2?

Answer 1

You can achieve this by specifying the router exit as follows.

Assuming you download appComponent first,

app.component.html

<header></header> <router-outlet name='content1_r1_r2'><router-outlet/> <router-outlet name='content1_r3_r4'><router-outlet/> <router-outlet name='content2'><router-outlet/> <footer></footer> 

configure the router as follows:

 { path: 'r1', component: 'appComponent', children: [ { path: '', component: contentr12Component, outlet: 'content1_r1_r2' }, { path: '', component: contentr1Component, outlet: 'content2' } ] } // write same for r2 just change content1Component you want to load on /r2 route. { path: 'r3', component: 'appComponent', children: [ { path: '', component: contentr34Component, outlet: 'content1_r2_r4' }, { path: '', component: contentr3Component, outlet: 'content2' } ] } // write same for r4 just change content3Component you want to load on /r4 route. 

In the above code, contentr12Component will remain the same for routes r1 and r2, contentr34Component will remain the same for r3 and r4. You can replace the names according to your component.

It also avoids the ugly url.

Answer 2

You can create something like this by making each block of content a separate component and in your application a route:

 <header></header> <content-1></content-1> <router-outlet></router-outlet> <footer></footer> 

Now configure the router to show the correct content 2 data for a particular route. Components can also communicate, so you must pass the corresponding data to the content-1 component (see Component Interaction in Angular Documents).

Answer 3

It seems that the default angular 2 router does not really support multiple named views. This strange AUX routing function (called outputs) can be useful in some rare cases (pop-ups, dynamic areas, etc.), but it is absolutely unsuitable for classic master-child templates with several placeholders.

A radical solution might switch to ui-router for angular -2 instead of the standard one.