Angular2-子组件之间的routerConfig子路由

问题描述

子路由在子组件之间重新加载页面时遇到问题.

The sub-routing is having an issue with the page reloading between child components.

在app.ts中

@RouteConfig([
    { path: 'app/businessunits/...', component: BusinessRootComponent, as: 'BusinessRoots' },
])

在BusinessRootComponent.ts

in BusinessRootComponent.ts

@RouteConfig([
    { path: '/', component: BusinessUnitComponent, as: 'BusinessUnit', useAsDefault: true },
    { path: '/apartment', component: ApartmentComponent, as: 'Apartment' },
    { path: '/aptdetails', component: AptDetailsComponent, as: 'AptDetails' } // not working as expected
])

当我在公寓页面中有一个指向aptdetails的routerLink时，单击此链接后，页面将重新加载.

When I have a routerLink in apartment page to aptdetails, the page reloads when this link in clicked.

从BusinessUnit到Apartment的链接可以正常工作.但是从Apartment到AptDetails不能按预期工作.

The link from BusinessUnit to Apartment works as expected. But from Apartment to AptDetails doesn't work as expected.

任何想法在配置中有什么问题吗?

Any idea what is wrong in the config ?

RouterLink在单元组件中

The RouterLink is in the Apartment component

@Component({
    selector: 'apartment',
  template: `
   <div *ngFor="#apartment of apartments" class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
              <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-js-button mdl-js-ripple-effect">{{apartment.UnitType}}</a>
                <a [routerLink]="['AptDetails']" class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="getAvailable(apartment)">Available</a>
              </div>
    </div>
    `,

    directives: [ROUTER_DIRECTIVES]
})

推荐答案

根据您的组件结构，我认为这应该可行:

According to your component structure I think this should work:

<a [routerLink]="['../AptDetails']"

这篇关于Angular2-子组件之间的routerConfig子路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！