web-dev-qa-db-ja.com

Angular `<router-outlet>`はテンプレートを2回表示します

Angular4を使用してルーターリンクを作成しようとしています。ルータリンクは機能しますが、テンプレートが2回表示されます。 duplicate component

以下はコンポーネントの私のコードです：

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

私のルート：

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

デフォルトのルートはAppComponentを指しているため、ルートはAppComponent内にAppComponentをレンダリングしています。

このためにDashboardComponentまたはHomeComponentを作成します。そして次に：

{ path: '', component: DashboardComponent }

更新1：

@GünterZöchbauerが述べたように、pathMatch: 'full'を "子のない空のパスルート"に追加する必要があります。

したがって、AppComponentアプローチ（check Günter's answer ）を使用できます。

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

または、私の回答で上記に述べたDashboardComponentアプローチ。

24
SrAxi

なぜこれが起こっているのですか？

1）アプリケーションのエントリポイント、おそらくmain.tsでは、次の行を読み取ることができます。

platformBrowserDynamic().bootstrapModule(AppModule);

これはangular to bootstrap the moduleAppModule

2）AppModuleでは、次の行を見つけることができます。

bootstrap: [ AppComponent ]

これにより、angular to bootstrap the componentAppComponent）と通知されます。これが、最初のContacts App部分。AppComponentのhtmlテンプレートは次のとおりです。

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

3）ただし、AppComponentのテンプレートには<router-outlet>も含まれています。ルーターはルート構成を読み取り、それに応じてAppComponentの新しいインスタンスを作成し、それを要素<router-outlet>の直後に挿入します。これが、2番目のContacts App部分が表示される理由です。

10
Michael P. Bazos

子のない空のパスルートがある場合は、pathMatch: 'full'を使用します

の代わりに

{ path: '', component: AppComponent },

使用する

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

そして@SrAxiが言ったこと。

6
Günter Zöchbauer

答えは私にはうまくいきません。

ルート

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

ダッシュボードモジュール

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

App-routing.module.tsファイルで次を使用してみてください：

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

の代わりに：

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