Angular2首级路由加载后子路由无法正常工作

Question

我的��由配置如下：

RouterModule.forRoot([
    { path: '', redirectTo: 'main', pathMatch: 'full' },
    { path: 'main', component: SummaryComponent, children: [
        { path: 'data/:deviceId/:incidentId', component: DeviceMetricsComponent },
        { path: 'incident/analysis/:incidentId', component: IncidentAnalysisComponent },
      ] 
    },
    { path: 'test', component: TestFullPageComponent, children: [
        { path: 'test2', component: TestFullPageChildComponent}
      ] 
    },

    { path: 'logs/jobs/:jobtype', component: JobLogsComponent, pathMatch: 'full' },
    { path: '**', redirectTo: 'main' }
])

这是我的“主”模板：

<div class="row">
    <div class="col-md-12">
        <!-- Some links are in this table that load into the router-outlet below -->
        <app-incident-node-table [tableTitle]="incidentNodeTableTitle" [parentSubject]="incidentNodesSubject"></app-incident-node-table>
    </div>
</div>
<div class="row" style="margin-top: 500px;">
    <div class="col-md-12">
        <div id="childResult">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

当我第一次访问此页面并点击链接时，它会按预期加载到<router-outlet>中。此时我的网址变成类似于http://localhost:4200/main/incident/analysis/3816913766390440113的内容。

然而，在该表格中悬停的任何其他链接都显示不同的URL，但是一旦它们被点击，新内容就不会加载到<router-outlet>中。

编辑: IncidentNodeTable模板中的链接如下所示：

<span><a pageScroll [pageScrollOffset]="60" [routerLink]="['/main/incident/analysis', row.IncidentId]">Analyze</a></span>

- blgrnboy

Answer 1

新内容无法加载的原因是您正在使用ActivatedRoute的“params”属性，它是一个Observable，因此当您导航到同一组件时，路由器可能不会重新创建组件。在您的情况下，参数正在更改而不重新创建组件。 因此，请尝试以下解决方案：

    export class IncidentAnalysisComponent implements OnInit, OnDestroy {
      id: number;
      limit: number;
      private sub: any;

      constructor(private route: ActivatedRoute) {}

      ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
           this.id = +params['id']; 
           this.limit = 5; // reinitialize your variable 
           this.callPrint();// call your function which contain you component main functionality 
        });
      }
     ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

我希望这对你有用 :)

- Amit kumar