0
140
Views¿Cómo renderizar un componente sin renderizar AppComponent en todo momento?
Quiero renderizar 2 componentes ( AppComponent y UserComponent ) sin tener que renderizar AppComponent en todo momento. Así es como se ve mi código:
app.routing.module.ts
const routes: Routes = [ { path: '', component: AppComponent }, { path: 'user', component: UserComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }aplicación.componente.html
<div> I'm in the app component </div> <router-outlet></router-outlet>Ahora, por alguna razón, el texto "Estoy en el componente de la aplicación" se representa 2 veces, como puede ver en la imagen:
Ahora cuando voy a la ruta '/usuario' veo esto:
entonces mi pregunta es ¿Cómo puedo ver solo el texto "Estoy en el componente de la aplicación" cuando estoy en la ruta '/' y cuando estoy en la ruta '/ usuario' solo veo "el usuario trabaja!" ? ¡Muchas gracias por adelantado!
3 answers
Answer question0
AppComponent se representa de forma predeterminada como su componente raíz. Necesitará crear otro componente y usarlo como su componente de inicio. Consulte el stackblitz actualizado.
0
Mi respuesta es: no. Cree un Otro componente, luego elimine todo menos la etiqueta <router-outlet> de AppComponent.html.
Trate ese AppComponent como el nivel superior por el que fluye todo. Angular es muy obstinado, y si hace las cosas de una manera que no es una práctica estándar, Angular actuará como debe hacerlo.
Si las dos ramas realmente deberían estar tan separadas, considere tener aplicaciones separadas.
0
Esto se debe a que la ruta predeterminada '' coincide con las rutas ' '' y 'user' . Intente configurar pathMatch: 'full' en AppComponent y no debería mostrarse en otras rutas:
{ path: '', component: AppComponent pathMatch: 'full' } Pero el mayor problema aquí es que la ruta predeterminada debe ser un componente separado y su AppComponent debe ser el que contiene el router-outlet .