0
303
ViewsAngular `<router-outlet>` muestra la plantilla dos veces
Estoy usando angular4 e intento crear un enlace de enrutador. El enlace del enrutador funciona pero muestra la plantilla dos veces. 
A continuación se muestra mi código en el componente:
import { Component } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-root', template: ` <h1>Contacts App</h1> <ul> <li><a [routerLink]="['/facebook/top']">Contact List</a></li> </ul> <router-outlet></router-outlet> ` }) export class AppComponent { constructor( private route: ActivatedRoute, private router: Router, ){ } gotoDetail(): void { this.router.navigate(['facebook/top']); } }mis rutas:
const routes: Routes = [ { path: '', component: AppComponent }, { path: 'facebook/top', component: CommentComponent }, ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule {}3 answers
Answer question0
Su ruta predeterminada apunta a AppComponent , por lo que su ruta representa AppComponent dentro de AppComponent .
Cree un DashboardComponent o HomeComponent para esto. Y luego haz:
{ path: '', component: DashboardComponent }Actualización 1:
Como mencionó @GünterZöchbauer, deberíamos agregar pathMatch: 'full' para "una ruta de ruta vacía sin hijos" .
Así que podemos ir con el enfoque de AppComponent (verifique la respuesta de Günter ) :
{ path: '', component: AppComponent, pathMatch: 'full' } O bien, el enfoque de DashboardComponent como dije anteriormente en mi respuesta.
0
¿Por qué está pasando esto?
1) En el punto de entrada de su aplicación, muy probablemente main.ts , uno puede leer esta línea:
platformBrowserDynamic().bootstrapModule(AppModule);Esto le dice a angular que inicie el módulo AppModule
2) En AppModule , uno puede encontrar esta línea:
bootstrap: [ AppComponent ]Esto le dice a angular que arranque el componente AppComponent . Es por eso que ve la primera parte de la aplicación Contactos , porque la plantilla html de AppComponent es:
<h1>Contacts App</h1> <ul> <li><a [routerLink]="['/facebook/top']">Contact List</a></li> </ul> <router-outlet></router-outlet> 3) Sin embargo, la plantilla de su AppComponent también contiene <router-outlet> . El enrutador lee la configuración de rutas, en consecuencia crea una nueva instancia de AppComponent y la inyecta justo después del elemento <router-outlet> . Es por eso que ve la segunda parte de la aplicación Contactos .
0
Si tiene una ruta de ruta vacía sin hijos, use pathMatch: 'full'
en vez de
{ path: '', component: AppComponent },usar
{ path: '', component: AppComponent, pathMatch: 'full' },y lo que dijo @SrAxi.