So, I have a layout like this:
<div class="page-container">
<app-header></app-header>
<div class="container">
<div class="row row-offcanvas row-offcanvas-left">
<app-side-nav></app-side-nav>
<app-broadcast-show></app-broadcast-show>
<router-outlet></router-outlet>
</div>
</div>
</div>
And all components are working well with this, except for one. This is my Router array:
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
{
path: 'admin', component: MainComponent, children: [
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'fund_transfers/deposits',
component: FundTransfersComponent,
children: [
{
path: 'edit',
component: DepositComponent
},
],
},
{
path: 'fund_transfers/withdrawals',
component: FundTransfersComponent,
},
{
path: 'profile',
component: ProfileComponent
},
{
path: 'broadcast',
component: BroadcastCreateComponent
}
]
},
];
Route
children: [
{
path: 'edit',
component: DepositComponent
},
],
Doesn't show when I click on a button that is leading there. I registered Component, created it like I created the rest of the components that are working, but it is not triggering constructor nor onInit, nor is it hiding the previous view and showing the deposit/edit.
Anybody has any solution to this?
Found out whats going on. If using route as child, then in the parent html I need to set router-outlet, not in the first in line, in my case, admin, but rather in fund_transfers/deposits.
Related
I create a website template with mock data by using vue & vuetify.
I have different pages like:
localhost:8080/home
localhost:8080/exp
localhost:8080/skills
localhost:8080/about
I would like to use this template for each user and change the structure to this:
localhost:8080/username/home
localhost:8080/username/exp
localhost:8080/username/skills
localhost:8080/username/home
I don't know whether this is the best practice and also I don't know how to do it.
I think that I will use firebase to store and get user related data. Also I am open for any suggestions.
When I go localhost:8080/user/1 I can see everything in User.vue however when I go localhost:8080/user/1/home nothing is rendered. (localhost:8080/home works. I can see everything inside User.vue & Home.vue as well.
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/exp',
name: 'exp',
component: Exp
},
{
path: '/skills',
name: 'skills',
component: Skills
},
{
path: '/about',
name: 'about',
component: About
}
]
}
]
})
User.Vue
<template>
<div>
user
<div>This is Bar {{ $route.params.id }}</div>
{{personal.name}}
<router-link :to="{ name: 'personal' }">Personal Info</router-link>
<router-view></router-view>
</div>
</template>
You need to do this in the router. like this:
{
path: 'username',
meta: { label: 'Username'},
component: {
render (c) { return c('router-view') }
},
children: [
{
path: 'home',
name: 'Home',
component: Home
},
{
path: 'exp',
name: 'Exp',
component: Cards
},
{
path: 'about',
name: 'About',
component: About
},
{
path: 'other',
name: 'Other',
component: Other
}
]
}
So u add childs to your path.. this makes the url look like /username/exp
The main problem was using ' / home' in the path. This is why it goes localhost:8080/home instead of localhost:8080/user/1/home
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'home',
name: 'home',
component: Home
},
{
path: 'exp',
name: 'exp',
component: Exp
},
{
path: 'skills',
name: 'skills',
component: Skills
},
{
path: 'about',
name: 'about',
component: About
}
]
}
]
})
User.Vue
<template>
<div>
user
<div>This is Bar {{ $route.params.id }}</div>
{{personal.name}}
<router-link :to="{ name: 'personal' }">Personal Info</router-link>
<router-view></router-view>
</div>
</template>
My router code is as below. When I am trying to access intro page in DashboardComponent,
it loads intro component but comes back to dashboard, what am I doing wrong?
{ path: '', component: HomeComponent, //home component
children: [
{ path: 'dashboard', component: DashboardComponent } // first child
{ path: 'main', component: ClientComponent, //2nd child
children: [
{ path:'intro', component:ClientsComponent, outlet:intro',
children: [ // grand children
{ path: '', redirectTo: 'list', pathMatch: 'full' },
{ path: 'list', component: ListComponent},
]
},
]}
}
I tried with both navigate and navigateByUrl, none seems to work:
router.navigate(['../main', {outlets: {'intro': ['intro']}}], {relativeTo: this.activatedRoute})
OR
router.navigateByUrl('main/(intro:intro/list)');
I have been working with Nativescript with Angular 2 and Typescript and understand there are two options for the router outlet. The original angular <router-outlet> directive which can be used to show children routes of a component, and the <page-router-outlet> which is specific to nativescript routing. I have been using the latter and attempting to use the <router-outlet> directive but find that it acts the same. I want for example this scenario.
parent.component.html
<StackLayout>
<Button [nsRouterLink]="['/accounts/edit-account']"><Button>
<Button [nsRouterLink]="['/accounts/new-account']"><Button>
</StackLayout>
<router-outlet></router-outlet>
This has two buttons with nativescript nsRouterlink directive. I want the buttons to remain while the router-outlet updates with the child information.
here are the routes.
module.routing.ts
const Routes: Routes = [
{ path: "accounts", children: [
{path: "", component: ParentComponent },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
The problem is when I attempt this it replaces the entire screen without leaving the buttons in place as would do the <page-router-outlet> directive.
I've even followed this documentation by Nativescript and the example does not act as the documentation declares.
Can anyone steer me in the right direction?
Following the Nativescript Documentation again works ok. The solution in general is in the routing to change from
const Routes: Routes = [
{ path: "accounts", children: [
{path: "", component: ParentComponent },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
to
const Routes: Routes = [
{ path: "accounts", component: ParentComponent, children: [
{path: "", redirectTo: "/accounts/new-account", pathMatch: 'full' },
{ path: "new-account", component: ChildOneComponent},
{ path: "edit-account", component: ChildTwoomponent},
]
},
];
Finding this I have a new issue that I will post in a different question and link to this answer later.
I have the following configuration for my Angular2 routes...
RouterModule.forRoot([
{
path: '',
// redirectTo: '/admin',
component: LoginComponent,
pathMatch: 'full'
},
{
path: "admin",
component: ContentComponent,
children: [
{
path:"admin",
component: HeaderComponent,
outlet: 'header'
},
{
path:"admin",
component: LeftNavComponent,
outlet: 'header'
},
{
path:"admin",
component: AdminComponent,
outlet: 'body'
}
]
}
])
This works good but I don't really need a path for the children and the navigation (["/admin", {outlets: {"header":["admin"], "body":["admin"], "leftNav":["admin"]}}];) and the url (#/admin/(header:admin//body:admin//leftNav:admin)) are really long. Since I can infer the children is there a way I can leave them out?
When I upgraded from #angular/router v3.1.2 to v3.2.0 it started working as I would expect.
I am working on an angular sample app. The effect I want to get is the following:
I have a login page. When you login, you see the 'home' page. Right now, the home page is a simple html protected by authguard. I want this page to have a header section and body section. This is similar to gmail where the section at the top remain the same for all actions. For eg, the ability to logout appear in the top.
I want couple of routed in this header section that will load the different components in the body section.
This is what I have and does not seem to work.
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard]
, children: [
{path: 'home', component: HomeComponent, pathMatch: 'full'},
{ path: 'compb', component: ComponentB, outlet: 'list' },
{ path: 'compa', component: ComponentA, outlet: 'list' }
]
},
//{ path: 'compb', component: ComponentB },
//{ path: 'compa', component: ComponentA },
// otherwise redirect to home
{ path: '**', redirectTo: 'home' }
];
my home.component.html
<div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p><a [routerLink]="['/login']">Logout</a></p>
<p><a [routerLink]="['/compb']">CompB</a></p>
<p><a [routerLink]="['/compa']">CompA</a></p>
<br/><br/>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
Here is starting of the body!
<router-outlet name="list"></router-outlet>
Here is ending of body!
</div>
</div>
</div>
compA and compB are simple html pages to display "coponentA here" and "ComponentB here"
Any guidance will be much appreciated.
After some effort, I got it to work with child routes.
In my app.routes.ts, I initially had :
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard]
, children: [
{path: 'home', component: HomeComponent, pathMatch: 'full'},
{ path: 'compb', component: ComponentB, outlet: 'list' },
{ path: 'compa', component: ComponentA, outlet: 'list' }
]
},
//{ path: 'compb', component: ComponentB },
//{ path: 'compa', component: ComponentA },
// otherwise redirect to home
{ path: '**', redirectTo: 'home' }
];
I changed it to the following:
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], children:homeRoutes },
// { path: 'home', component: HomeComponent, canActivate: [AuthGuard]
// , children: [
// {path: 'home', component: HomeComponent, pathMatch: 'full'},
// { path: 'compb', component: ComponentB, outlet: 'list' },
// { path: 'compa', component: ComponentA, outlet: 'list' }
// ]
// },
//{ path: 'compb', component: ComponentB },
//{ path: 'compa', component: ComponentA },
// otherwise redirect to home
{ path: '**', redirectTo: 'home' }
];
I added the following to home.routes.ts
export const homeRoutes: Routes = [
{ path: 'compa', component: ComponentA },
{ path: 'compb', component: ComponentB },
];
In my home.component.html, I added the following:
<div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p><a [routerLink]="['/login']">Logout</a></p>
<p><a [routerLink]="['compb']">CompB</a></p>
<p><a [routerLink]="['compa']">CompA</a></p>
<br/><br/><br/><br/><br/><br/>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
Here is starting of the body!!<br/>
<router-outlet></router-outlet>
Here is ending of body!!
</div>
</div>
</div>