The sub-routing is having an issue with the page reloading between child components.
In app.ts
@RouteConfig([
{ path: 'app/businessunits/...', component: BusinessRootComponent, as: 'BusinessRoots' },
])
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
])
When I have a routerLink in apartment page to aptdetails, the page reloads when this link in clicked.
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 ?
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]
})
