Question

我试图导航到Angular 2组件中的特定元素。从我阅读过的文档中，它说使用了与NavigationExtras对象的片段。当我想在同一页面内导航时，我不确定如何执行此操作。

问题的另一部分是我要导航到的页面部分是通过* ngFor加载并使用我想要导航到的id创建div元素。

我可能会尝试在将页面加载到DOM之前导航到该部分页面。我绕过它包围了一个超时，看看是否会有所帮助，但到目前为止还没有成功。

我在属性页面上，并尝试导航到页面中的其他部分。你可以在HTML中看到我在我需要导航到的div上设置id。

＆＃13;

    if (sessionStorage['destinationProperty'] !== undefined) {
        let navigationExtras: NavigationExtras = {
        fragment: sessionStorage.getItem('destinationProperty')
      }

      window.setTimeout(() => {
        this._router.navigate(['/properties'], navigationExtras);
      }, 1000);
    }

＆＃13;

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

＆＃13;

Answer 1

In Angular2 app you can have a router for some components.
Each component can have its own router for other components and so on.

So you actually need a child router for your primary router.
Here it's an example from Angular2文档中的“a”是如何处理子路由器的：
主路由器

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

完整示例的链接：
Angular2 lazy loading with the router
Angular2 full working plunker for lazy loading with the router

如何使用Angular 2路由器导航到页面的特定部分？

1 个答案: