web-dev-qa-db-fra.com

Angular `<router-outlet>` affiche le modèle deux fois

J'utilise angular4 et j'essaie de créer un lien de routeur. Le lien du routeur fonctionne mais affiche le modèle deux fois. duplicate component

Voici mon code dans le composant:

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']);
    }
}

mes itinéraires:

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'facebook/top',  component: CommentComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}
angularangular-ui-routerangular-directive
15
kevinabraham

Votre itinéraire par défaut pointe vers AppComponent, donc votre itinéraire rend le AppComponent à l'intérieur du AppComponent.

Créez un DashboardComponent ou HomeComponent pour cela. Et puis:

{ path: '', component: DashboardComponent }

Mise à jour 1:

Comme @ GünterZöchbauer l'a mentionné, nous devons ajouter pathMatch: 'full' pour "une route de chemin vide sans enfants".

Nous pouvons donc suivre l'approche AppComponent (vérifier réponse de Günter ):

{ path: '', component: AppComponent, pathMatch: 'full' }

Ou, l'approche DashboardComponent comme je l'ai indiqué ci-dessus dans ma réponse.

24
SrAxi

Pourquoi cela se produit-il?

1) Dans le point d'entrée de votre application, très probablement main.ts, on peut lire cette ligne:

platformBrowserDynamic().bootstrapModule(AppModule);

Cela indique angular à bootstrap le module AppModule

2) Dans AppModule , on peut trouver cette ligne:

bootstrap: [ AppComponent ]

Cela indique angular à bootstrap le composant AppComponent . C'est pourquoi vous voyez la première partie App Contacts, car le modèle html de l'AppComponent est:

<h1>Contacts App</h1>
<ul>
    <li><a [routerLink]="['/facebook/top']">Contact List</a></li>
</ul>
<router-outlet></router-outlet>

3) Cependant, le modèle de votre AppComponent contient également <router-outlet>. Le routeur lit la configuration des routes, crée en conséquence une nouvelle instance de AppComponent et l'injecte juste après l'élément <router-outlet>. C'est pourquoi vous voyez la deuxième partie App Contacts.

10
Michael P. Bazos

Si vous avez une route de chemin vide sans enfants, utilisez pathMatch: 'full'

au lieu de

{ path: '', component: AppComponent },

utilisation

{ path: '', component: AppComponent, pathMatch: 'full' },

et ce que @SrAxi a dit.

6
Günter Zöchbauer

Les réponses ne fonctionnent pas pour moi.

Route

{ path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule'},

Module de tableau de bord

NgModule({
  imports: [
    SharedModule,
    DashboardRoutingModule,
    PipesModule.forRoot()
  ],
  declarations: [
    MyDashboardComponent,
    DashboardParentComponent
  ],
  providers: [
    ApiService
  ],
})
export class DashboardModule { }
0
Temi 'Topsy' Bello

Dans votre fichier app-routing.module.ts, essayez d'utiliser:

{path: '' , redirectTo: 'AppComponent', pathMatch: 'full'}

au lieu de:

{ path: '', component: AppComponent, pathMatch: 'full' }
0
Kunal