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

时间:2016-06-09 16:48:55

标签: angular

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

在app.ts

@RouteConfig([
    { path: 'app/businessunits/...', component: BusinessRootComponent, as: 'BusinessRoots' },
])
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 
])

当我在公寓页面中有一个routerLink到aptdetails时,点击此链接时页面会重新加载。

从BusinessUnit到Apartment的链接按预期工作。但是从Apartment到AptDetails并没有按预期工作。

知道配置中有什么问题吗?

RouterLink位于公寓组件

@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]
})    

1 个答案:

答案 0 :(得分:0)

根据您的组件结构,我认为这应该有效:

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