I can't find solution to go to named view. My routes ,
routes: [
{
path: '/',
component: App,
children : [
{
path: '/',
redirect: 'home'
},
{
path: 'home',
components: {
home : Home,
contact : Contact,
geo : Geo,
shake : Shake,
camera : Camera
}
},
]
}
]
This is my app.vue
...
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button #click="page()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
...
export default {
name : 'App',
methods: {
page() {
this.$router.push('home');
}
}
}
I want to go to the Camera component when I click camera icon/button. How can I achieve this?
You have to define multiple router views for each name in named views. There should be one default, and multiple others for each name. Like this.
<router-view></router-view>
<router-view name="home"></router-view>
<router-view name="contact"></router-view>
All respective components will all be loaded in router-view when a url is hit.
You can read more about it in this doc. An see a working example here
if you want to redirect using the script you can try this to change the route.
this.$router.push({ name: 'your_route_name' })
in addition, you can also send params to that route by enabling props: true while defining routes,
this.$router.push({name: 'your_route_name', params: { var_name: data } })
Related
I am working in a B2B Spartacus project and we are currently implementing the MyCompany User/Unit management. The Spartacus implementation is a little to complex for our use-case so we are developing a custom solution based on it.
The original implementation features a CMS-Page for users (e.g.: https://spartacus-demo.eastus.cloudapp.azure.com:444/powertools-spa/en/USD/organization/users) and then Angular child routes for the user details (e.g.: /organization/users/7a95e933-364c-4c8d-81cd-4f290df0faf1)
I tried to replicate the child route implementation following the Spartacus documentation.
I created a parent (RightsManagementUser) and child (RightsManagementUserDetails) component.
<p>rights-management-user works!</p>
<a
class="btn btn-primary"
[routerLink]="{
cxRoute: 'orgUserDetails',
params: { customerId: '9e26d9fb-14eb-4ec6-9697-3fa53302245c' }
} | cxUrl"
>Go to User Details</a
>
<router-outlet></router-outlet>
Following the Spartacus Documentation, I provided a Spartacus and an Angular routing config
export const userRoutingConfig: RoutingConfig = {
routing: {
routes: {
orgUser: {
paths: ['organization/users'],
},
orgUserDetails: {
paths: ['organization/users/:userCode'],
paramsMapping: {
userCode: 'customerId',
},
},
},
},
};
RouterModule.forChild([
{
path: null,
component: PageLayoutComponent,
canActivate: [CmsPageGuard],
data: { cxRoute: 'orgUser' },
children: [
{
path: null,
component: RightsManagementUserDetailsComponent,
data: { cxRoute: 'orgUserDetails' }
},
],
},
]),
I also tried following the documentation for Adding Angular Child Routes for a Content Page
and added the child route to the cms config.
RightsManagementUserComponent: {
component: RightsManagementUserComponent,
childRoutes: [
{
path: ':userCode',
component: RightsManagementUserDetailsComponent,
},
],
},
This all wasn't enough, when clicking the button, the CMSPageGuard tries to load the CMS page for /organization/users/7a95e933-364c-4c8d-81cd-4f290df0faf1 instead of activating the child route.
I then tried to go the Angular way and defined the child route without using cxRoute:
children: [
{
path: ':userCode',
component: PflRightsManagementUserDetailsComponent,
},
],
At first I was happy, since the child route actually activated:
But then I realized that when I do a browser refresh Spartacus again tries to access the CMS-Page instead of activating the route.
Can someone please help me out and point me to the right way to use child routes in Spartacus?
If you would like to use split view, you can define your route in this way #customizing-routes, then clone whole cms configuration for organization feature and personalize childs #customizing-cms-components.
It could looks like:
const yourConfig = { ...userCmsConfig.cmsComponents.ManageUsersListComponent };
(yourConfig.childRoutes as CmsComponentChildRoutesConfig).children[1].component = RightsManagementUserDetailsComponent;
and include in your module
imports: [
// ...
B2bStorefrontModule.withConfig({
// ...
cmsComponents: {
ManageUsersListComponent: yourConfig,
},
},
// ...
I can't redirect a ionic 4 tab page to other tab page using parameters.
I'm using tabs-routing.module.ts with this code:
{
path: 'tab2/:id',
outlet: 'tab3',
children: [
{
path: '',
loadChildren: () =>
import('../tab2/tab2.module').then(m => m.Tab2PageModule)
}
]
},
/* {
path: 'tab2/:id',
outlet:'tab3',
component: Tab2PageModule
}, */
The view contains:
ion-button size="small" href="/tabs/tab2/{{f}}/"...
or
ion-button size="small" href="/tab2/{{f}}/" ...
The browser says:
core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs/tab2/1/'
When I use:
ion-button size="small" href="/tabs/(tab3:tab2/{{ f }})" ...
The url in browser is
http://localhost:8100/tabs/(tab3:tab2/2)
The content in the browser disappears and only shows the tabs.
To navigate within your app you should use routerLink directive like the following:
<ion-button size="small" [routerLink]="['/tabs/tab2/', id]">
routerLink directive documentation
It seems there is an other issue. Your declared routes are: tab2/:id and tab2/:id. Yet you're routing to /tabs/tab2/1 while you should be routing to /tab2/1
Like this:
<ion-button size="small" [routerLink]="['/tab2/', id]">
Thanks for your help, now it works correctly. However, now the controller does not get the parameter correctly.
In this screen I will call the details module
main module
But the module that receives the parameters does not get the data sent
This is how the screen looks without parameters
second module
When I add the complete code (using the parameter)
ion-button size=small routerLink=/tabs/tab2/{{f}}
ERROR Error: Uncaught (in promise): Error: Cannot match any routes.
URL Segment: 'tabs/tab2/3' Error: Cannot match any routes. URL
Segment: 'tabs/tab2/3'
The content of file tabs.routing.module.ts is
{
path: 'tab2/:id',
outlet: 'tab3',
children: [
{
path: '',
loadChildren: () =>
import('../tab2/tab2.module').then(m => m.Tab2PageModule)
}
]
},
{
path: 'tab2/:id',
outlet: 'tab3',
component: Tab2PageModule
},
the content of file tabs2.page.ts is
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { ListadoPokemonService } from '../servicio/listado-pokemon.service';
#Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit{
idPokemon: string;
nombrePokemon: string;
listado:any;
constructor(private activatedroute: ActivatedRoute, private servicio: ListadoPokemonService) { }
ionViewVillEnter(){
this.idPokemon = this.activatedroute.snapshot.paramMap.get('id');
// this.nombrePokemon = this.activatedroute.snapshot.paramMap.get('nombre');
this.servicio.getData('https://pokeapi.co/api/v2/pokemon/'+this.idPokemon+'/').subscribe(data=>{
console.log(data);
this.listado=data;
});
}
ngOnInit() {
}
}
Thanks in advance for your help i'm php & visual studio developer but new in angular & ionic issues.
I could solve it, just add the following code
{
path: 'tab2/:id',
//component: Tab2PageModule
loadChildren: () =>
import('../tab2/tab2.module').then(m => m.Tab2PageModule)
},
in tabs-routing.module.ts
I solved this problem by placing the redirect object above the empty path. like this example:
const routes: Routes = [
{
path: '',
redirectTo: '/user/profile-u',
pathMatch: 'full'
},
{
path: '',
component: UserPage,
children: [
{
path: 'job-applying',
loadChildren: () => import('./job-applying/job-applying.module').then(m => m.JobApplyingPageModule)
}, ...
I hope this helps you. I realize this seems like a trivial solution, but some things in this framework are just a little finicky.
I want to move from 1 page to another page and for that I have write below code in home.page.html file.
<div style="display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px;">
<ion-button (click)="goToLoginPage()" size="large">Continue</ion-button>
</div>
Below is home.page.ts file code.
export class HomePage {
constructor(public navController: NavController) {
}
goToLoginPage(){
this.navController.navigateForward(LoginVCPage) // Getting error at this line.
}
}
Below is error screenshot.
Any help will be appreciated
In Ionic 4 using NavController is deprecated. See this statement from the Migration Guide:
In V4, navigation received the most changes. Now, instead of using
Ionic's own NavController, we integrate with the official Angular
Router.
Angular manages it's routes in a separate file, in Ionic 4 this file is named app-routing.module.ts. Every time you create a new page using ionic g page pagename the CLI will automatically create a new entry in the routes array in app-routing.module.ts.
So assuming you have created a test page and now have following routes in app-routing.module.ts:
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'test', loadChildren: './test/test.module#TestPageModule' },
];
You can move to another page by adding a href property to your button with the corresponding path (e.g. '/test') to the page you want to move to:
<ion-button href="/test">Move to test page</ion-button>
You could also use the routerLink directive as pointed out here:
<ion-button [routerLink]="['/test']">Move to test page</ion-button>
If you want/need to navigate programmatically you'll have to inject the router service into your page/component and call navigateByUrl like so:
constructor(private router: Router) { }
goToTestPage() {
this.router.navigateByUrl('/test');
}
Also see the Angular docs on routing and the Ionic v4 docs on this topic.
To add to #Phonolog 's answer you should also use routerDirection="forward" or whatever direction it may be.
I'm trying to use page transition from routerExtensions without success. (2.3.0)
I tried in js:
this.routerExtensions.navigate(
[
'myPage'
],
{
animated: true,
transition:
{
name: 'flip',
duration: 2000,
curve: 'linear'
}
}
);
and I tried in the xml:
<Button text="Goto myPage" [nsRouterLink]="['/myPage']" pageTransition="flip"></Button>
Both ways works as I navigate to "myPage" but without animations.
Is there a setting I need to change to "enable" the animations or am I missing something obvious?
With the provided context it's difficult to say exactly why it's not working.
All you should really need to do is:
Setup the components you're routing to:
app-routing.module.ts
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/home' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
];
Inject the native router extensions in the component with your router-outlet
app.component.ts
import { RouterExtensions } from "#nativescript/angular/router";
#Component({
selector: "ns-app",
templateUrl: "./app.component.html"
})
export class AppComponent {
constructor(private routerExtensions: RouterExtensions) {}
public navigate(link: string): void {
this.routerExtensions.navigate([link], {
animated: true,
transition: { name: 'slide' }
});
}
}
And of course have a way to call this method
app.component.ts
<StackLayout>
<FlexboxLayout>
<Button text="Home" (tap)="navigate('home')"></Button>
<Button text="About" (tap)="navigate('about')"></Button>
<Button text="Contact" (tap)="navigate('contact')"></Button>
</FlexboxLayout>
<StackLayout>
<page-router-outlet actionBarVisibility="never"></page-router-outlet>
</StackLayout>
</StackLayout>
I've setup a working repo demonstrating this here https://github.com/gsavchenko/nativescript-page-transitions. These are also possible to achieve in angular not using nativescript native routing APIs.
Cheers,
let me know if there are further questions.
Have a look at the Groceries app by nativescript and its a great resource for all nativescript component - https://github.com/NativeScript/sample-Groceries. You can find the transition animation they have given in it.
Good Luck. If need any help ask.
How to make tabs in ionic framework as a child on a single page. I want create home page , when i fire next button in home page , it will direct to tabs page. Here is the parent of tabs page {tabs page is child of login.html page}, here is login.html page :
<ion-view view-title="Login">
<ion-content >
<p>
<a class="button icon ion-home" href="#> Home</a>
</p>
</ion-content>
</ion-view>
Here is my app.js :
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('login',{
url: '/login',
templateURL: "templates/login.html"
})
.state('tab', {
parent: 'login',
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
I think you are pretty close. In login.html set the href attribute to /tab. Make sure that all the templates mentioned in your code exists, otherwise angular will fail. Maybe you could also change url in $urlRouterProvider.otherwise('/tab/dash'); to /login so the user will see the login page by default when your app opens.