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'
}]
}
Related
I have 3 tabs in my app from which I want to redirect to another page.i.e when the user clicks on the tabs it will load a list from that I want to redirect to a page (say X).After clicking the back button of X page ionViewWillEnter/DidEnter doesnot work. Can any one help me to findout the solution ?
App Module Routing page :- Which loads a seprate module called UW.
const routes: Routes = [
{
path: 'uw',
loadChildren: () => import('src/app/UW/uw.module').then(m => m.UwModule)
},
]
UW module Loads a dashboard page :
const routes: Routes = [
{
path: 'dashboard-uw',
loadChildren: () => import('src/app/UW/pages/dashboard-uw/dashboard-uw.module').then(m => m.DashboardUwPageModule)
},
{
path: '',
redirectTo: 'dashboard-uw',
pathMatch: 'full'
},
]
The dashboard page contain Tabs which loads seprate pages on each Tab click
Dashboard routing Module :
const routes: Routes = [
{
path: '',
component: DashboardUwPage,
children: [
{
path: uwconstants.UW_TAB1,
loadChildren: () => import('src/app/UW/pages/uw-premium/uw-premium.module').then(m => m.UwPremiumPageModule)
},
{
path: uwconstants.UW_TAB2,
loadChildren: () => import('src/app/UW/pages/uw-invoices/uw-invoices.module').then(m => m.UwInvoicesPageModule)
},
{
path: uwconstants.UW_TAB3,
loadChildren: () => import('src/app/UW/pages/uw-tat/uw-tat.module').then(m => m.UwTatPageModule)
},
{
path: uwconstants.UW_TAB4,
loadChildren: () => import('src/app/UW/pages/uw-intermediary/uw-intermediary.module').then(m => m.UwIntermediaryPageModule)
},
{
path: uwconstants.UW_TAB5,
loadChildren: () => import('src/app/UW/pages/uw-vet-pvet-add-tab/uw-vet-pvet-add-tab.module').then(m => m.UwVetPvetAddTabPageModule)
},
{
path: '',
redirectTo: uwconstants.UW_TAB1,
pathMatch: 'full'
},
]
},
{
path: '',
redirectTo: 'uw/dashboard-uw/UW-TAB1',
pathMatch: 'full'
},
];
Each tab click loads a seprate page,using this line of code
public approvePremium(item) {
this.navctrl.navigateForward([ '/uw/uw-premium-send', { leadCode: item } ])
}
for back button click, I am using
this.navctrl.navigateBack([ 'uw', 'dashboard-uw', 'UW-TAB1' ]);
ionViewWill Enter Not triggered after the back button click.Some one help me to findout the solution.Thanks in advance
Change the tabs routing module by the following
TabsPageRoutingModule
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [ {
path: '',
loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule),
},
{
path: 'dummy',
loadChildren: () => import('../sample/sample.module').then(m => m.SamplePageModule)
} ]
},
{
path: 'tab2',
loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
},
{
path: 'tab3',
loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
Here we have three tabs tab1,tab2,tab3 and dummy is the child page of tab1
tabsPage.html
<ion-tabs>
<ion-tab-bar slot="bottom" **id="myTabs"**>
----
----
</ion-tab-bar>
</ion-tabs>
From your first tab you can navigate to child page navigate method. Since hiding tabs on inner pages is a known issue there is no straight forward method to hide it. So use the following custom method. Create a service class and add it as a common method
ServiceClass
public toggleTabsBar(){
const tabId = document.getElementById('myTabs');
if (tabId) {
if (tabId.style.display === 'none') {
tabId.style.display = 'flex';
}else{
tabId.style.display = 'none'
}
}
}
In your child page here dummy page hide the tabs bar by invoking the toggleTabsBar() on IonViewDidEnter() method
DummyPage
ionViewDidEnter(): void {
this.toggleTabsBar();
}
When you click the backbutton from the child page to navigate back to the parent page to show the tabs invoke the same method on the IonViewDidEnter() method.
How do I render this object using react router? I want to render this object in a menu.
{main: 'Main', about: 'About', contacts: 'Contacts', '404': 404}
Refactor it this way:
const menu = [
{ title: 'Main', path: '/main' },
{ title: 'About', path: '/about' },
{ title: 'Contacts', path: '/contacts' },
{ title: '404', path: '/404' }
];
Now do this in your JSX wherever you want your menu:
{menu.map(item => <Link to={item.path} alt={item.title} />)}
Don't forget to import Link:
import { Link } from 'react-router-dom'
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},
]
}];
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?
I have existing PHP website, which I start adding angular2 component to.
I have added router script, to help load different component by its url.
When I navigate away from the component page, I get following error Error: Uncaught (in promise): Error: Cannot match any routes: 'dashboard'
I understand, that I need to create another component to make this error disappear. But I don't want to create another component, because there are so many pages, I would end up creating component for each page.
So I wanted to ask, how to make 1 default component, which will pickup if no component was available OR how can I just make this error disappear, so it does not trigger if it cant found any router or component for that path.
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {TestComponent} from "./test/test.component";
const appRoutes: Routes = [
{ path: 'search', component: TestComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
you may add a wildcard route which will redirect to a default component if route does not match.
{ path: 'default', component: DefaultComponent },
{ path: '**', redirectTo: '/default' }
So if the route does not match your default component will be loaded in the router outlet.
Hope this helps!!
I use this as default route:
{ path: '', component: Home, text: 'Home' }
and this is my full routes:
export const routes: TextRoute[] = [
{ path: '', component: Home, text: 'Home' },
{ path: 'accordion', component: AccordionDemo, text: 'Accordion' },
{ path: 'alert', component: AlertDemo, text: 'Alert' },
{ path: 'buttons', component: ButtonsDemo, text: 'Buttons' },
{ path: 'carousel', component: CarouselDemo, text: 'Carousel' },
{ path: 'collapse', component: CollapseDemo, text: 'Collapse' },
{ path: 'dropdown', component: DropdownDemo, text: 'Dropdown' },
{ path: 'pagination', component: PaginationDemo, text: 'Pagination' },
{ path: 'popover', component: PopoverDemo, text: 'Popover' },
{ path: 'progressbar', component: ProgressbarDemo, text: 'Progressbar' },
{ path: 'rating', component: RatingDemo, text: 'Rating' }
];
export const AppRoutes = RouterModule.forRoot(routes, { useHash: true });
Check out my learning angular2 project at github, stars are welcome.
Im too new to comment, my question is if you are using express backend? app.use() might be able to save you some trouble. instead of declaring the routes try in app.js
var routes = require('routes');
app.use('/name-of-url', routes )
then in routes
router.get('name-of-url', function(res,req,next){
res.sendFile(path to php file to serve)
})
You may also need to change your express templating engine to php, not entirely sure.