I´m building a nav component in angular, that allows the user to go to a component inside the App.component. This nav component is also inside the App component. All of the components are shown from the begin, i wanted the nav was able to find the component that is already shown in the App component.
I tried to put the nav in the App component hardcoded, but it didn't work.
This is my App.component.html where i call all of the componentes, this is the parent component.
<app-slideshow></app-slideshow>
<!--others-->
<app-dashboard></app-dashboard> //<-- component where the nav is
<router-outlet></router-outlet>
This is my app-routing.module.ts where i defined the routes to the components
const parentModuleRoutes: Routes = [
{
path: 'home', //<---- parent component declared here
component: AppComponent,
children: [ //<---- child components
declared here
{
path:'slideshow',
component: SlideshowComponent
},
{
path:'about',
component: AboutComponent
},
{
path:'service',
component: ServiceComponent
},
{
path:'explore',
component: WorksComponent
},
{
path:'contact',
component: ContactComponent
},
]
}
];
This is the dashboard component where the nav element is build and where I want to create the link with a component
<nav>
<ul>
<li>
<a routerLink="/home/slideshow">
<p>Home</p>
</a>
</li>
<li>
<a routerLink="/home/about">
<p>About Us</p>
</a>
</li>
<li>
<a routerLink="/home/service">
<p>Service</p>
</a>
</li>
<li>
<a routerLink="/home/explore">
<p>Explore</p>
</a>
</li>
<li>
<a routerLink="/home/contact">
<p>Contact Us</p>
</a>
</li>
</ul>
</nav>
The console prints this three errors, because the router-outlet is defined on the app component(parent):
ERROR Error: StaticInjectorError(AppModule)[RouterOutlet ->
ChildrenOutletContexts]:
StaticInjectorError(Platform: core)[RouterOutlet ->
ChildrenOutletContexts]:
NullInjectorError: No provider for ChildrenOutletContexts!
ERROR CONTEXT DebugContext_
View_AppComponent_0 @ AppComponent.html:16
Error: StaticInjectorError(AppModule)[RouterOutlet ->
ChildrenOutletContexts]:
StaticInjectorError(Platform: core)[RouterOutlet ->
ChildrenOutletContexts]:
NullInjectorError: No provider for ChildrenOutletContexts!
The trick is create the layout components and call it in the app.component, so when u want to change to another component with a navbar for exemple, u can use it go to /about or /service, with changing the rest of the layout.
App.component.html
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
app-routing.module.ts
const parentModuleRoutes: Routes = [
{
path:'slideshow',
component: SlideshowComponent
},
{
path:'about',
component: AboutComponent
},
{
path:'service',
component: ServiceComponent
},
{
path:'explore',
component: WorksComponent
},
{
path:'contact',
component: ContactComponent
}
];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.