i just implemented breadcrumb for my project and in routes file it required the child routes in child array. So I did this:
{
path: 'customercreation/:formType',
component: CustomerCreationComponent,
data: {
breadcrumb: 'Customer Creation'
},
children: [
{
path:
':customerId/:stepId/:EntityId',
component: FormComponent,
data: {
breadcrumb: 'Form'
}
},
]
},
But when I am routing to child component, it showing me the parent component, but routes is changing. And in the same case when I am writing child part out side of child array, I mean new routes, then it working properly, What I did wrong in this?
You have to add a <router-outlet></router-outlet> in your CustomerCreationComponent.
There it will output it's children.
Related
I have a button in a component that onclick will navigate to its child component.
Button code
<button class="summary" #click="navigateToSummary">
<span>Summary</span>
</button>
methods:{
navigateToSummary() {
return this.$router.push({
name: 'PortfolioSummary',
params: { coinId: this.coinSummary.coinId },
});
},
}
Router code
{
name: 'AppPortfolio',
path: '/portfolio',
component: AppPortfolio,
children: [
{
name: 'PortfolioSummary',
path: ':coinId',
component: PortfolioSummary,
props: true,
},
],
},
On clicking the button, the url updates in the browser, but it doesnt navigate to the child component.
What am I meant to change?
Your AppPortfolio view requires it's own <router-view> where PortfolioSummary will be rendered.
Basically when you use nested child routes in this manner they require a router-view inside a router-view to settle your 2 tree deep setup, a 3 for deep tree example will requires 3 nested router-views, so on and so fourth.
App.vue
<router-view>
AppPortfolio
<router-view>
PortfolioSummary
I am wanting to use Material Tab's (https://material.angular.io/components/tabs/api#MatTabLink) within my Ionic 4 project, now, the requirements are that I need to house multiple views in a tab and the first thought was that I can use a new ion-router-outlet or router-outlet within my parent component.
Bare in mind that I do already have one router outlet for the main app.
I am lazy loading the main chat routes in my app-routing.module.ts, this page is responsible for loading the tabs.
{ path: 'chat', loadChildren: './chat/chat.module#ChatPageModule', canActivate: [ AuthGuard ]}
Now, in my chat.module.ts I have the following routes:
{ path: '', component: ChatPage },
{ path: 'active', component: ActivePage },
{ path: 'messages', component: MessagesPage },
{ path: 'teams', component: TeamsPage }
ChatPage component is my parent tab view page. The others I am wanting to be in a tab.
The HTML for displaying these tabs is in chat.page.html and looks like this:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of routeLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{ link.label }}
</a>
</nav>
<router-outlet></router-outlet>
I have also tried <ion-router-outlet></ion-router-outlet> but this throws up more issues.
The main issue here is that the routes look as though they are loading up in the main router outlet rather than the child one, I have tried adding the name attribute to the mark up but my IDE states that it's not valid and doesn't seem to work.
Ok, I have figured it out, and I am going to look stupid for not trying this before but the issue was that in order to use this child router-outlet the routes I wanted in tabs need to child routes.
{ path: '', component: ChatPage, children: [
{ path: 'active', component: ActivePage },
{ path: 'messages', component: MessagesPage },
{ path: 'teams', component: TeamsPage }
] },
I'm trying to figure out the cleanest way to set up my Angular routing.
I have a parent route, and inside as a child, I'd like to repeat the same component multiple times (a list of all the locations). Each of the location (child) component occurrences will look the same, just with different data that I will need to pass in. (I'll do this with *ngFor).
Here's what I'm thinking so far:
<router-outlet>//for the parent
<router-outlet name="aux">
<ul *ngFor="let location in service.locations"
</router-outlet>
//where I list out all the locations^
</router-outlet>
on my app-routing.module.ts file:
const routes: Routes = [
{ path: 'main', component: MainComponent }, //lists all locations
{ path: 'locations/:id', component: LocationsComponent }, //view 1
location
{ path: '', pathMatch: 'full', redirectTo: '/main},
];
(I want to have both parent and child appear on initial load. Should I modify that?^)
Now this is the part I don't understand as much, I need to set my route configs. Is this close? And does it goin my app-routing.module.ts file as well?
#RouteConfig([
{path:'/', name: 'MainPath', component: MainComponent,
useAsDefault: true},
{aux:'/auxRoute', name: 'AuxPath', component: SecondComponent}
])
Thanks! Please let me know if you need clarification.
I have a code where router config looks like:
{
path: 'users',
component: UsersComponent,
children: [
{
path: 'add',
component: AddUserComponent
}
]
}
By that I'd like to have two pages:
/users - which shows users list
/users/add - which shows a form to add a new user
But I don't what to have nested router-outlet tags. Both pages I'd like to render in the same, main container which is app-root. I know I can do that just by:
{
path: 'users',
component: UsersComponent
},
{
path: 'users/add',
component: AddUserComponent
}
But you probably agree with me that this is not a nice solution and it'd be good to use children construction.
How can I do that?
You don't need a nested route if you don't have a component assigned to the route => just don't add the component to the definition of the users route and make a dedicated empty path for the list page:
{
path: 'users',
children: [
{
path: '',
component: UsersComponent
},
{
path: 'add',
component: AddUserComponent
}
]
}
There is a drawback here: if you use a routerLink inside of UsersComponent where you will use relative path, the empty path will behave still as a path. So you would need to use relative path similar to ../add and not ./add as normally one would think
Check this code:
{
path: 'users',
component: UsersComponent,
children: [
{
path: '',
component: UsersComponent
},
{
path: 'add',
component: AddUserComponent
}
]
}
Suppose there is a component - UsersComponent, and it has two methods: getAlUsers() and getUser(id). In the #RouteConfig we can use only one name of the component (constructor will be called default ), but we can not specify what kind of a class method must be called. Is it possible to define something like this:
{
path: '/users/',
component: UsersComponent,
name: 'Users'
},
{
path: '/users/getAllUsers',
component: UsersComponent.getAllUsers,
name: 'GetAllUsers'
},
{
path: '/users/getUser',
component: UsersComponent.getUser,
name: 'GetUsers'
}
Or is it impossible to make means Angular 2?
This is a pretty common use case for component nesting and using sub components for the different actions like "user list" and "user details". The idea is to use pretty fine grained components with a very focused use case. If you have common code (e.g. loading data via http), consider moving this logic into a service that is used by all components.
You can achieve this by referencing a "UserComponent" in your top level Component routing with the "..." notation. Then inside this "UserComponent" define another routing with two configs for / and /:id such that you reference two child components "user list" and "user details".
Parent Route Config:
{
path: '/users/...',
name: 'Users',
component: UserComponent
}
Route Config in the UserComponent:
#RouteConfig([
{ path: "/", name: "User List", component: UserListComponent, useAsDefault: true },
{ path: "/:id", name: "User Detail", component: UserDetailComponent },
])