i have the following app route configuration:
const routes: Routes = [
{loadChildren: './modules/faq/faq.module', path: 'faq'},
{loadChildren: './modules/pagination/pagination.module', path: 'page'},
{loadChildren: './modules/appointmentAgreement/appointmentAgreement.module#AppointmentAgreementModule', path: 'terminvereinbarung'}
];
And the appointmentAgreement child modules route configuration
const appointmentAgreementRoutes: Routes = [{
path: '',
children: [
{path: 'thema', component: TopicSectionComponent},
{path: 'filiale', component: BranchSectionComponent},
{path: 'termin', component: DatetimeSectionComponent},
{path: 'daten', component: PersonalDataSectionComponent},
{path: 'bestaetigung', component: ConfirmationSectionComponent},
]
}];
Now i want the application to redirect to /terminvereinbarung/thema if page /terminvereinbarung is openend.
How can i achieve this?
Thanks a lot in adcance.
Keep all routing as it is just try adding this redirect in children in sub module
const appointmentAgreementRoutes: Routes = [{
path: '',
children: [
{ path: '', redirectTo: 'thema', pathMatch: 'full' },
{path: 'thema', component: TopicSectionComponent},
{path: 'filiale', component: BranchSectionComponent},
{path: 'termin', component: DatetimeSectionComponent},
{path: 'daten', component: PersonalDataSectionComponent},
{path: 'bestaetigung', component: ConfirmationSectionComponent},
]
}];
Try to do the following in appointmentAgreement component:
const appointmentAgreementRoutes: Routes = [{
{
path: 'terminvereinbarung',
redirectTo: 'thema',
pathMatch: 'full'
},
{
path: 'terminvereinbarung',
component: TopicSectionComponent,
}
children: [
{path: 'thema', component: TopicSectionComponent},
{path: 'filiale', component: BranchSectionComponent},
{path: 'termin', component: DatetimeSectionComponent},
{path: 'daten', component: PersonalDataSectionComponent},
{path: 'bestaetigung', component: ConfirmationSectionComponent},
]
}];
Related
I'm using Angular (v2.4.5). Is it possible to have nested named outlets?
Here is my situation:
//app.component.html
<router-outlet name="test"></router-outlet>
<router-outlet></router-outlet>
//dashboard.component.html
<router-outlet name="test"></router-outlet>
<router-outlet></router-outlet>
Routes:
const routes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'login',
component: LoginComponent
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
redirectTo: 'inbox',
pathMatch: 'full'
},
{
path: 'inbox',
component: InboxContentComponent
},
{
path: 'test',
component: TestComponent,
outlet: 'test'
}
],
{
path: 'test',
component: TestComponent,
outlet: 'test'
}
}
If I go to this url: http://localhost/login(test:test) the TestComponent is loaded in the app.component.html outlet.
If I go to this url: http://localhost/dashboard/inbox(test:test) the TestComponent is loaded in the app.component.html outlet and not in dashboard.component.html
I want to be able to target test outlet from dashboard. Is it possible?
Can somebody help me with angular 2 routing.
I have 2 pages.. home and search results page..
Header for home and search results page are different..
here is my code, I am able to display the home page with header but when I go to search results page, header is not getting replaced with new one..
home.routes
export const HomeRoutes: Routes = [
{ path: '', component: HomeComponent},
{ path: '', component: HomeHeadbarComponent, outlet: 'route1' }
];
search.routes
export const SearchRoutes: Routes = [
{ path: 'search', component: SearchPanelComponent},
{ path: 'search', component: HeadbarComponent, outlet: 'route1' }
];
App.html
<router-outlet name="route1"></router-outlet>
<router-outlet></router-outlet>
Appreciate your help
Your home.routes should be below code this will be redirect to you HomeComponent and if you want to redirect it on SearchPanelComponent both you can use in below code
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent} from './Home';
export const routes: Routes = [
{ path: '', redirectTo: 'Home', pathMatch: 'full' },
{ path: 'Home', component: HomeComponent},
{ path: 'search', component: SearchPanelComponent},
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(routes);
I assume, that happens because you have empty path path: '' for the first header, so it could overlap the new one. Could you try with the different path, and check it out, should help.
got it working with the code below..
{
path: 'search',
children: [
{
path: '',
component: SearchPanelComponent
},
{
path: '',
component: HeadbarComponent,
outlet: 'route1'
}]
}
I am new to Component Router. I am using it in angular 1.5 and I would like to define a default component in the case a user try to access a route not defined in the config :
I have an app component with this config :
$routeConfig: [
{ path: '/...', name: 'Layout', component: 'layout', useAsDefault: true }
]
and a layout component with this config
$routeConfig: [
{path: '/', name: 'Home', component: 'home', useAsDefault: true},
{path: '/user', name: 'User', component: 'user' }
]
I can access to the urls localhost:8080/#/ and localhost:8080/#/user but
when I try to access localhost:8080/#/test it doesn't redirect me to the home component although the useAsDefault is set to true (I obtain a blank page...).
Has anyone faced this problem ?
Current working on angular2 beta version 6, in this nested routing like parent to child using (EX: /plan/...) future is not working on es5 JavaScript development, but in type script development it's working perfectly
Throwing error: EXCEPTION: Link "["Plan"]" does not resolve to a terminal instruction.
App.js code
var Tabs = [],viewId;
app.AppComponent =
ng.core.Component({
selector: 'app',
template: '<router-outlet></router-outlet>',
directives: [ng.router.ROUTER_DIRECTIVES],
providers: [ng.http.HTTP_PROVIDERS]
})
.Class({
constructor: [ng.router.Router, function(router) {
console.log("1");
router.config([
{ path: '/', redirectTo: ['Home'] },
{ path: '/home', component: app.HomeComponent, name: 'Home' },
{ path: '/plan/...', component: app.planComponent, name: 'Plan' }
]);
}]
});
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap( app.AppComponent,[ng.router.ROUTER_PROVIDERS]);
});
Plan.js code
app.planComponent =
ng.core.Component({
selector: 'plan-view',
templateUrl: './assets/src/plan/view/plan.html',
directives: [ ng.router.RouterLink, ng.router.ROUTER_DIRECTIVES],
})
.Class({
constructor:[ng.router.Router, function(router){
console.log("2");
router.config([
{ path: '/', redirectTo: ['PlanInfo'] },
{ path: '/planInfo', component: app.planInfoComponent, name: 'PlanInfo', useAsDefault: true }/*,
{ path: '/coverage', component: app.CoverageComponent, name: 'Coverage' },
{ path: '/nonelective', component: app.nonElectiveComponent, name: 'NonElective' },
{ path: '/loans', component: app.loansComponent, name: 'Loans' },
{ path: '/enrollment', component: app.enrollmentComponent, name: 'Enrollment' }*/
]);
}]
});
I think that you should use the ng.router.RouteConfig decorator instead of the router itself. Like this, you will have the same configuration as with TypeScript.
Here is the way to do:
ng.router
.RouteConfig([
{ path: '/', redirectTo: ['Home'] },
{ path: '/home', component: app.HomeComponent, name: 'Home' },
{ path: '/plan/...', component: app.planComponent, name: 'Plan' }
])(app.AppComponent);
(...)
ng.router
.RouteConfig([
{ path: '/', redirectTo: ['PlanInfo'] },
{ path: '/planInfo', component: app.planInfoComponent, name: 'PlanInfo', useAsDefault: true }/*,
{ path: '/coverage', component: app.CoverageComponent, name: 'Coverage' },
{ path: '/nonelective', component: app.nonElectiveComponent, name: 'NonElective' },
{ path: '/loans', component: app.loansComponent, name: 'Loans' },
{ path: '/enrollment', component: app.enrollmentComponent, name: 'Enrollment' }*/
])(app.planComponent);
As a reference, you could have a look at this plunkr: https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=info.
I thought the new direction that Angular was going in was Controller free views. How come the New Router (seemingly) asks for a Controller? Is it possible to route without one?
Yes it is possible. In 1.5 You can use component() or 1.3+ directive().
Here is the latest example working with angular 1.5, components() and child routes:
http://plnkr.co/edit/N3YP3dKMuljpZ6mWsVBT?p=preview
app.js
angular.module('app', ['ngComponentRouter', 'dialog', 'heroes', 'crisis-center'])
.config(function($locationProvider) {
$locationProvider.html5Mode(true);
})
.run(function($router) {
$router.config([
{ path: '/...', name: 'App', component: 'app', useAsDefault: true }
]);
$router.navigate(['App']);
})
.component('app', {
template:
'<nav>\n' +
' <a ng-link="[\'CrisisCenter\']">Crisis Center</a>\n' +
' <a ng-link="[\'Heroes\']">Heroes</a>\n' +
'</nav>\n' +
'<ng-outlet></ng-outlet>\n',
$routeConfig: [
{path: '/crisis-center/...', name: 'CrisisCenter', component: 'crisisCenter', useAsDefault: true},
{path: '/heroes/...', name: 'Heroes', component: 'heroes'},
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]}
]
});