0
137
VisualizaçõesHow to render a component without rendering AppComponent at all times?
I want to render 2 components (AppComponent and UserComponent) without having to render AppComponent at all times. Here's what my code looks like:
app.routing.module.ts
const routes: Routes = [
{
path: '', component: AppComponent
},
{
path: 'user', component: UserComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<div>
I'm in the app component
</div>
<router-outlet></router-outlet>
Now for some reason "I'm in the app component" text is rendered 2 times as you can see in the picture:
Now when I go to route '/user' I see this:
so my question is How can I only see "I'm in the app component" text when on on '/' route and when I'm on '/user' route only see "user works!"? Thanks a lot in advance!
3 Respostas
Responde à pergunta0
AppComponent renders by default as its the root component. You would need to create another component and use that as your home component. Please check the updated stackblitz.
0
My answer is: Don't. Make an OtherComponent, then remove all but the <router-outlet> tag from AppComponent.html.
Treat that AppComponent as the top level that everything flows through. Angular is very opinionated, and if you do things in a way that's not standard practice, Angular will act like it's meant to.
If the two branches should really be that separate, consider having separate apps.
0
This is because default route '' matches both '' and 'user' paths. Try setting pathMatch: 'full' to the AppComponent and it shouldn't render on other routes:
{
path: '',
component: AppComponent
pathMatch: 'full'
}
But more of an issue here is that the default route should be a separate component and your AppComponent should be the one that holds the router-outlet.