Question

我页面的每个部分都是一个单独的组件，在滚动时一个接一个地位于：

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

我见过的所有示例都是在不同页面上为组件创建路由的地方，其中（最简单的说法）清除容器<router-outlet></router-outlet>并使用分配给给定路径的组件填充它。

我所描述的情况如何，所有组件都位于同一页面上并且可见？

滚动到指定部分时如何设置正确的路线？我的想法是创建一个指令，如果部分是可见的，则添加类，并从主模块中分配一个onscroll监听器，检查当前可见的部分并分别分配路由。这是正确的做法吗？

如何链接到指定的部分？使用常规href=#sectionId或内置的角度链接指令？

Answer 1

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

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

路由到同一页面上的多个组件

1 个答案: