I have 2 components with parent and child relations. In the parent component, I have images which on click should navigate to child component. Following is my code, the URL in the browser is changing but the page isn't navigating.
Routing
const routes: Routes = [
{
path: 'parent', component: ParentComponent, children: [
{ path: 'child', component: ChildComponent}
]
},
{ path: '**', component: LoginComponent }
];
HTML
<section>
<img src="imagePath" alt="" (click)="gotoProfile()">
</section>
<div>
<router-outlet></router-outlet>
</div>
TS
gotoProfile() {
this.route.navigate(['/parent/child']);
}
The navigation is working only when I use boolean variables to display hide on button click (which is not a good practise), as below. Using boolean values after navigating is throwing some problem, on click of back button in child component the parent component is not loading.
TS
gotoProfile() {
this.hideParentDiv = true;
this.route.navigate(['/parent/child']);
}
HTML
<section *ngIf="hideParentDiv ">
<img src="imagePath" alt="" (click)="gotoProfile()">
</section>
<div *ngIf="!hideParentDiv ">
<router-outlet></router-outlet>
</div>
Can anybody help me with this, any help is much appreciated.
Thank you.
The router-outlet is tag used to render the components. You should not hide it.It's like blocking a door before trying to get in. If you want to "hide" the elements, then you should move the router-outlet up in the navigation hierarchy. What this means is that you should make "Page of Images to Click" and "Page of Detail Image" siblings in the router. Like this:
const routes: Routes = [
{
path: 'home', component: ExampleComponent, children: [
{ path: 'images-page', component: ImagesComponent },
{ path: 'image-detail-page', component: ImageDetailComponent}
]
},
{ path: '**', component: LoginComponent }
];
Related
I have app component in which i lazy load create-new-module with component profilecomponent. now in profile component i hit router.navigate and trying to load another children detail in place of profile but its not working also no error in console.
please help
// App component route
const routes: Routes = [
{
path: 'create-new-emp',
loadChildren: () => import('./create-new-emp/create-new-emp.module').then(c => c.CreateNewEmpModule),
},
{ path: '', redirectTo: 'create-new-emp', pathMatch: 'full'},
{ path: '**', redirectTo: 'create-new-emp'}
];
// Emp Module Route
const routes: Routes = [
{ path: '', component: ContainerComponent,
children: [
{ path: '', component: ProfileComponent, outlet: 'form'},
{ path: 'profile', component: ProfileComponent, outlet: 'form'},
{ path: 'detail', component: DetailComponent, outlet: 'form' }] }
];
// Trying to hit below link but not working
this.router.navigate(['detail'])
<app-component>
<router-outlet>
<container-component>
<profile-component></profile-component>
</container-component>
</router-outlet>
</app-component>
Complicated with only these information to help. But is the way angular navigates amount components/pages. I think what you are trying to do is navigate between components (according your router.ts). If you want to navigate, you only need router-outlet in your html code and not use component tag in the HTML code.
Change this:
<app-component>
<router-outlet>
<container-component>
<profile-component></profile-component>
</container-component>
</router-outlet>
</app-component>
To this:
<app-component>
<router-outlet>
</router-outlet>
</app-component>
Then, into ContainerComponent.html you need to repeat to navigate to details o profile because these are child routes.
<router-outlet></router-outlet>
That will give you more information about what you need.
Its hard to say with this info, but may... you should define de router outlet name
<router-outlet name="form"></router-outlet>
Hope it's help.
I have a problem with my angular 8 app, not rendering into a named router-outlet.
The routes are:
routes.module:
const routes: Routes = [
...
{
path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canActivate
},
]
settings.module
RouterModule.forChild([
{
path: '', component: SettingsComponent
},
{
path: 'profile', component: ProfileComponent, outlet: 'settings_o'
},
{
path: 'users', component: UsersComponent, outlet: 'settings_o'
}
])
settings.component.html
<nav mat-tab-nav-bar color="primary" class="bg-whitesmoke primary">
<span mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="[{outlets: {settings_o: [link.link]}}]"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</span>
</nav>
<router-outlet name="settings_o"></router-outlet>
When I click a link, the url in the address bar changes (e.g. to http://localhost:4200/settings/(settings_o:profile)), but no content is rendered to settings_o, nor do the components get loaded. There is no error in the console.
link.link is, for example simply profile like in settings.module's routes.
What do I need to change?
This is a known bug which has been discussed a lot: https://github.com/angular/angular/issues/10981
As far as I know it hasn't been solved completely but there are workarounds: https://github.com/angular/angular/issues/10981#issuecomment-454425220
You should give the lazy loaded module a default route and define the child routes for the components that you would like to open in the named outlet, for example:
RouterModule.forChild([
{
path: "default",
component: SettingsComponent,
children: [
{ path: "profile", component: ProfileComponent,outlet: "settings_o" },
{ path: "users", component: UsersComponent, outlet: "settings_o" }
]
}
]);
Of course you have to change the navigation to the SettingsComponent accordingly: routerLink='/settings/default'
I made a Stackblitz which is not an exact copy of your code but which shows how it can be solved: https://stackblitz.com/edit/angular-nctjpv
By the way, in your original solution, if you placed the named router outlet in the root component, I think it would display the child component but in the wrong place.
I trying to setup deep nesting like below, and I am kinda sure about we cannot use exact in router-link for nested routes.
<div id="app">
<nav class="nav nav-main">
<router-link exact to="/" class="nav-link" activeClass="active">Dashboard</router-link>
<router-link to="/projects" class="nav-link" activeClass="active">Projects</router-link>
</nav>
<div class="parent-content">
<h4>Content for Parent goes here</h4>
</div>
<router-view>
<nav class="nav nav-main">
<router-link :to="'/projects/' + $route.params.projectId" class="nav-link" activeClass="active">Deals</router-link>
<router-link :to="'/projects/' + $route.params.projectId + '/commitments/'" class="nav-link" activeClass="active">Commitments</router-link>
</nav>
<router-view>
<div class="child-content">
<h4>Content for Child goes here</h4>
</div>
</router-view>
</router-view>
</div>
My Route:
routes: [
{
path: '/',
component: Dashboard
},
{
path: '/projects',
component: Projects
},
{
path: '/projects/:id',
name: 'projects-detail',
component: ProjectDetails,
children: [
// DEALS
{
path: '/projects/:projectId/deals',
component: Deals
},
{
path: '/projects/:projectId/deals/:dealId/details',
component: DealDetails
},
// COMMITMENTS
{
path: '/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit',
component: CommitmentEdit
}
]
}
]
With the above setup, I need to activate router-links, when the route is:
/projects/:projectId/deals/:dealId/details then activate Deals
/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit then activate Commitments
I think you have not another <router-view></router-view> inside ProjectDetails component add this and try.
Also remove /projects/:projectId from all child path as you have already in parent path path: '/projects/:id',
So final you route would be
routes: [
{
path: '/',
component: Dashboard
},
{
path: '/projects',
component: Projects
},
{
path: '/projects/:id',
component: ProjectDetails,
children : [
// DEALS
{
path: 'deals/:dealId/details',//path will be /projects/:projectId/deals/:dealId/details
component: DealDetails
},
{
path: 'deals',.// path will be /projects/:projectId/deals
component: Deals
},
// COMMITMENTS
{
path: '/deals/:dealId/commitments/:commitmentId/edit/',
component: CommitmentEdit
}
]
}
]
Here is working fiddle : https://jsfiddle.net/chyLjpv0/16/
Read more about child path.
If you need not and component depended on parent dont make it as child use directly as root path like
routes: [
{
path: '/',
component: Dashboard
},
{
path: '/projects',
component: Projects
},
{
path: '/projects/:id',
component: ProjectDetails,
},
// DEALS
{
path: '/projects/:projectId/deals/:dealId/details',
component: DealDetails
},
{
path: '/projects/:projectId/deals',
component: Deals
},
// COMMITMENTS
{
path: '/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit/',
component: CommitmentEdit
}
]
Working fiddle for this : https://jsfiddle.net/chyLjpv0/17/
Class router-link-exact-active is already working in this example : https://jsfiddle.net/chyLjpv0/18/ to display link as active
In your edit
Why you put <router-view> inside <router-view>. Outer is only working as it is being replaced and inner <router-view> is worthless. Use <router-view> in parent component for child component.
Also your inner <router-view> is not closed properly like </router-view>
I have structure of routes:
{
path: '',
component: LibraryComponent
,
children: [
{
path: '',
component: LibraryPageComponent
},
{
path: 'online-learning',
component: LibraryCoursesPageComponent
},
{
path: 'events',
component: LibraryEventsPageComponent,
}
// another children
]
}
For example:
If my current route 'online-learning' or another route of children, how the parent component can know that the children's route is open?
May be is some method or value in ActivatedRoute.
P.S. Is there solution without parsing url?
Thanks!
So I have a route like this:
const routes = [{
path: '/',
component: Home,
children: [
{
path: "/health"
children: [
{
path: 'overview'
component: Overview
},
{
path: 'blood',
component: Blood
}
]
}
]
}]
and in the Home component I have something like this:
<template>
<div id="home">
<router-view></router-view>
</div>
</template>
But when I navigate to the /health/overview and /health/blood routes, the templates corresponding to the components won't render. I checked the apps $route objects, they correctly detect the routes and the components. Just the template won't render. I also have a <router-view> in my App.vue if that helps.
Is it not possible to have multi nested routes? Or am I missing something?
The health route should be like this:
{
path: 'health', // not '/health'
component: Health, // this can just be a dummy component with a <router-view/>
children: [...],
},
If you don't need the Health component at all for any reason (i.e. you don't have any shared functionality or template across each child), you can just remove the health route completely and replace it with this instead:
{
path: 'health/overview',
component: Overview,
},
{
path: 'health/blood',
component: Blood,
},