[英]How to navigate to a specific part of the page with the Angular 2 Router?
我正在尝试导航到Angular 2组件中的特定元素。 从我阅读的文档中可以看出,片段与NavigationExtras对象一起使用。 当我要在同一页面中导航时,我不确定如何执行此操作。
问题的另一部分是我要导航到的页面部分通过* ngFor加载,并使用我要导航的id创建div元素。
在将其加载到DOM中之前,我可能会尝试导航至页面的该部分。 我在它周围设置了一个超时,以查看是否有帮助,但是到目前为止还没有成功。
我在属性页面上,并尝试导航到页面内的另一部分。 您可以在HTML中看到我在需要导航到的div上设置id的位置。
if (sessionStorage['destinationProperty'] !== undefined) { let navigationExtras: NavigationExtras = { fragment: sessionStorage.getItem('destinationProperty') } window.setTimeout(() => { this._router.navigate(['/properties'], navigationExtras); }, 1000); }
<div class="row" *ngFor="let p of properties"> <div class="col-md-12"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6" id="{{p.id}}"> <table> <tr> <td rowspan="3"><img [src]="getImgPath(p)" /></td> <td class="title" (click)="destination(p)">{{p.name}}</td> </tr> <tr> <td class="summary">{{p.summary}}</td> </tr> <tr> <td><span class="mapLink" (click)="mapview(p)">view on map <i class="fa fa-map-o" aria-hidden="true"></i></span></td> </tr> </table> </div> <div class="col-md-3"></div> </div> </div> </div>
在Angular2应用中,您可以为某些组件设置路由器。
每个组件可以具有自己的其他组件路由器,依此类推。
因此,实际上您的主路由器需要一个子路由器。
这是Angular2文档中的示例 ,说明了它们如何处理子路由器:
主路由器
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
export const routes: Routes = [
{ path: '', redirectTo: 'contact', pathMatch: 'full'},
{ path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
{ path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
子路由器
import { ModuleWithProviders } from '@angular/core';
import { Routes,
RouterModule } from '@angular/router';
import { HeroComponent } from './hero.component';
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
const routes: Routes = [
{ path: '',
component: HeroComponent,
children: [
{ path: '', component: HeroListComponent },
{ path: ':id', component: HeroDetailComponent }
]
}
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.