Routing to multiple components on the same page

Question

Each section of my page is a separate component, which is located one after another while scrolling eg:

<sectionA></sectionA>
<sectionB></sectionB>
<sectionC></sectionC>

All the examples I've seen where creating routings to components on different pages, which where (in easiest words) clearing the container <router-outlet></router-outlet> and filling it with the component assigned to given route.

What about the situation I've described, where all components are located on the same page and visible ?

How to set a proper route when scrolled to given section? The idea I have is to create a directive adding classes if sections are visible or not, and assigning a onscroll listener from the main module checking which section is currently visible and assigning the route respectively. Is this a correct approach?

How to link to a given section? Using regular href=#sectionId or the built in angular link directives?

micronyks · Accepted Answer · 2016-10-05 15:53:52Z

1

For this, you can use name-router-outlet as shown here

DEMO: https://plnkr.co/edit/91YUcXI1la3B9dxzXSJp?p=preview

App.Component.ts

@Component({
  selector:"my-app",
  template:`
    <h3>Normal router-outlet</h3>

    <router-outlet></router-outlet>

    <hr>

    <h3>sectionA : named-router-outlet</h3>
    <router-outlet name='sectionA'></router-outlet>

    <hr>

    <h3>SectionB : named-router-outlet</h3>
    <router-outlet name='sectionB'></router-outlet>
  `
})

app.routing.ts

import { Routes,RouterModule } from '@angular/router';
import {HomeComponent} from './home.component';
import {SectionA} from './sectionA';
import {SectionB} from './sectionB';


let routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent},

   { path: '', outlet: 'sectionA', component: SectionA},
   { path: '', outlet: 'sectionB', component: SectionB}
];

export const routing = RouterModule.forRoot(routes);

answered Oct 5, 2016 at 15:53

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mjanisz1 Over a year ago

Hey sorry for some questions but im not at home and don't know how to debug the routes on plunker. If I want the page to be scrolled on init to that component is it enough to set the path in the routing? Is my approach for setting the path on scroll proper? Or maybe you have some better, more natural "angular way" ?

mjanisz1 Over a year ago

I've found that to link to given section of the page I have to use the fragment option in the linking directive. But what about scrolling to the part of the page while adding a route? eg.: if I want to go to /sectionb I want to load the page but be scrolled to that place

bogumbiker Over a year ago

have you found a way to scroll to /sectionb etc?

micronyks Over a year ago

@bogumbiker NOpe. I guess still it is an open issue in github.

bogumbiker Over a year ago

@micronyks what do you mean open issue in github? which repo?

Collectives™ on Stack Overflow

Routing to multiple components on the same page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related