Routing auf mehrere Komponenten auf der gleichen Seite

Question

Jeder Abschnitt meiner Seite ist eine separate Komponente, die einer nach dem anderen befindet, während zB Scrollen:

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

Alle Beispiele, die ich gesehen habe, wo Routings Komponenten zu schaffen auf verschiedenen Seiten, die (in einfachsten Worten) den Container <router-outlet></router-outlet> löschten und ihn mit der Komponente füllten, die der gegebenen Route zugewiesen war.

Was ist mit der Situation, die ich beschrieben habe, wo alle Komponenten auf der gleichen Seite und sichtbar sind?

Wie wird eine richtige Route beim Scrollen zu einem bestimmten Abschnitt festgelegt? Die Idee, die ich habe, besteht darin, eine Direktive zu erstellen, die Klassen hinzufügt, wenn Sektionen sichtbar sind oder nicht, und einen Onscroll-Listener vom Hauptmodul zuzuteilen, der prüft, welcher Bereich gerade sichtbar ist und die Route zuweist. Ist das ein richtiger Ansatz?

Wie zu einem bestimmten Abschnitt verlinken? Mit normalen href=#sectionId oder die eingebauten angular link Direktiven?

Answer 1

Dazu können Sie Name-Router-Ausgang verwenden wie hier gezeigt

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);