[英]Routing to multiple components on the same page
我页面的每个部分都是一个单独的组件,在滚动时一个接一个地位于,例如:
<sectionA></sectionA>
<sectionB></sectionB>
<sectionC></sectionC>
我见过的所有示例都在不同页面上创建到组件的路由,其中(用最简单的话说)清除容器<router-outlet></router-outlet>
并用分配给给定路由的组件填充它。
我所描述的所有组件都位于同一页面上并且可见的情况呢?
滚动到给定部分时如何设置正确的路线? 我的想法是创建一个指令,如果部分可见或不可见,则添加类,并从主模块分配一个 onscroll 侦听器,检查当前可见的部分并分别分配路由。 这是正确的方法吗?
如何链接到给定的部分? 使用常规的href=#sectionId
还是内置的角度链接指令?
为此,您可以使用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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.