ルートには重複した書式が表示されます

Question

私はangular2でプロジェクトを開始しましたが、何らかの理由で私のルートは自分のコンポーネントを2回表示します。ここに関連するコードスニペットがあります。

app.routing.ts

// Some import 
import { AuthComponent } from './master/auth'; 

const appRoutes: Routes = [ 
    { 
    path: 'master/registration', 
    component: AuthComponent 
    } 
]; 
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

app.module.ts

import { AuthComponent } from './master/auth/auth.component'; 

import { AppComponent } from './app.component'; 
import { routing } from './app.routing'; 

@NgModule({ 
    declarations: [ 
    // components 
    AuthComponent 
], 
providers: [ 
// some providers 
], 
imports: [ 
    BrowserModule, 
    ReactiveFormsModule, 
    routing 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

app.component.htmlは<app-auth></app-auth>

auth.componentが含まれています。 ts

import { Component, OnInit } from '@angular/core'; 
import * as all from './auth-utils'; 
@Component({ 
    moduleId: module.id, 
    selector: 'app-auth', 
    templateUrl: 'auth.component.html', 
    styleUrls: ['auth.component.css'] 
}) 
export class AuthComponent implements OnInit { 

    constructor() {} 

    ngOnInit() { 
    } 

} 

auth.component.html

<app-register-form [fields]="fields"></app-register-form> 
<app-login-form [loginFields]="loginFields"></app-login-form> 
<router-outlet></router-outlet> 

私はここで何をしないのですか？

Answer 1

あなたはそれがあなたの<router-outlet>に表示されますので、それにそのセレクタ<app-auth></app-auth>とルーティングを使用して、テンプレートにあなたのAuthComponent直接含めているように私には見えます。あなたはどちらか一方をしたいだけです。

AuthComponentにルーティングしようとしているので、テンプレートから<app-auth></app-auth>を削除してください。 AuthComponentがルーティング対象であるので、あなたはそのコンポーネントのアノテーションから行を削除することによって、いくつかの混乱を削除することがありので、実際には、それは、まったくのセレクタを必要としません：

@Component({ 
    moduleId: module.id, 
    /* selector: 'app-auth', */ 
    templateUrl: 'auth.component.html', 
    styleUrls: ['auth.component.css'] 
}) 
export class AuthComponent... 

Answer 2

あなたは既に<app-auth>を持っていることを述べましたapp.component.html、thatsはauthコンポーネントの最初のインスタンスを提供し、auth.component.htmlの中に<router-outlet></router-outlet>という2番目のインスタンスがあります。