路由到同一頁面上的多個組件

Question

我頁面的每個部分都是一個單獨的組件，在滾動時一個接一個地位於，例如：

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

我見過的所有示例都在不同頁面上創建到組件的路由，其中​​（用最簡單的話說）清除容器<router-outlet></router-outlet>並用分配給給定路由的組件填充它。

我所描述的所有組件都位於同一頁面上並且可見的情況呢？

滾動到給定部分時如何設置正確的路線？ 我的想法是創建一個指令，如果部分可見或不可見，則添加類，並從主模塊分配一個 onscroll 偵聽器，檢查當前可見的部分並分別分配路由。 這是正確的方法嗎？

如何鏈接到給定的部分？ 使用常規的href=#sectionId還是內置的角度鏈接指令？

Answer 1

為此，您可以使用name-router-outlet ，如下所示

演示： 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);