webentwicklung-frage-antwort-db.com.de

Angular `<router-outlet>` zeigt die Vorlage zweimal an

Ich benutze angle4 und versuche eine Router-Verbindung zu erstellen. Die Router-Verbindung funktioniert, die Vorlage wird jedoch zweimal angezeigt.  duplicate componenet

Unten ist mein Code in der Komponente:

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

meine Routen:

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
7
kevinabraham

Ihre Standardroute zeigt auf AppComponent, sodass Ihre Route die AppComponent innerhalb der AppComponent wiedergibt.

Erstellen Sie dazu eine DashboardComponent oder HomeComponent. Und dann mache:

{ path: '', component: DashboardComponent }

Update 1:

Als @ GünterZöchbauer sollten wir pathMatch: 'full' für "eine leere Pfadroute ohne Kinder" hinzufügen .

Also können wir mit dem AppComponent-Ansatz fortfahren (siehe Günters Antwort) :

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

Oder der DashboardComponent Ansatz, wie ich oben in meiner Antwort angegeben habe.

13
SrAxi

Wenn Sie eine leere Pfadroute ohne Kinder haben, verwenden Sie pathMatch: 'full'

anstatt

{ path: '', component: AppComponent },

benutzen

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

und was @SrAxi gesagt hat.

5
Günter Zöchbauer

Warum passiert dies?

1) In Ihrem Anwendungseinstiegspunkt, höchstwahrscheinlich main.ts, kann man diese Zeile lesen:

platformBrowserDynamic().bootstrapModule(AppModule);

Dies weist winklig an, das Modul zu booten AppModule

2) In AppModule findet man diese Zeile:

bootstrap: [ AppComponent ]

Dies weist winklig an, die Komponente AppComponent zu booten. Aus diesem Grund sehen Sie den ersten Kontakte App Teil.

3) Jetzt enthält die Vorlage Ihres AppComponent <router-outlet>. Der Router liest die Routenkonfiguration, instanziiert dementsprechend AppComponent und fügt sie direkt nach <router-outlet> ein. Aus diesem Grund sehen Sie den zweiten Kontakte App Teil.

5
Michael P. Bazos

Die Antworten funktionieren bei mir nicht.

Route

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

Dashboard-Modul

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